css定位:相对定位

关于相对定位的结论如下
1. 使用相对定位的盒子,会相对于它原来的位置,通过偏移指定的距离,到达新的位置。
2.使用相对定位的盒子仍在标准流中,它对父块和兄弟盒子没有任何影响。

<html><head><meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /><title>无标题文档</title><style type=”text/css”>
body{margin:15px;font-family:Arial;font-size:12px;}.father{background-color:#ffff99;border:1px solid #000000;padding:20px;}.father div{background-color:#00ff00;padding:10px;border:1px dashed #000000;}#block2{}</style></head><body><div class=”father”><div>Box-1</div><div id=”block2″>Box-2</div><div>Box-3</div></div></body></html>

static(静态定位)为默认值,即在原本应该在的流布局上,从左到右,从上到下。

relative(相对定位),通过设置position属性为relative,在设置具体方向的偏移量来实现,top   left  right botton
修改代码如下,即可发现box-2偏移了,但对box-3没影响,
#block2{
 position:relative;
 left:30;
 top:20;
 }

转载于:https://www.cnblogs.com/epuoo/p/4164631.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/420396.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue warn: Invalid prop: type check failed for prop “data“. Expected Array, got Object.

需要数组&#xff0c;但是获取的是对象拉。 但是接口解析处理返回的是数组。 与下面的定义有关。我定义成了对象.png. 正解&#xff1a;

前端学习(1306):node.js模块的加载机制

demo10.js require(./find.js); find.js console.log(找到了); 运行结果

Linux 命令快捷键

Linux 命令快捷键 tab 自动补齐(有不知道的吗)Ctrlu 删除(剪切)此处至开始所有内容 Ctrlk 删除从光标所在位置到行末 快速命令行 – 快捷方式• history 搜索历史执行过的命令• ctrll 清屏• Reset 刷新终端屏幕&#xff0c;尤其是终端出现字符不清晰或乱码时特管用 (和ctrl …

UVa 10820 (打表、欧拉函数) Send a Table

题意&#xff1a; 题目背景略去&#xff0c;将这道题很容易转化为&#xff0c;给出n求&#xff0c;n以内的有序数对(x, y)互素的对数。 分析&#xff1a; 问题还可以继续转化。 根据对称性&#xff0c;我们可以假设x<y&#xff0c;当xy时&#xff0c;满足条件的只有(1, 1)。…

前端学习(1309):创建网站服务器

//创建网站服务器模板 const http require(http); //网站服务器对象 const app http.createServer(); //客户端有请求 app.on(request, (req, res) > {res.end(<h2>hello user</h2>) }); //监听端口 app.listen(3000); console.log(服务器启动成功); 运行结果…

前端学习(1310):http协议

请求 响应 //创建网站服务器模板 const http require(http); //网站服务器对象 const app http.createServer(); //客户端有请求 app.on(request, (req, res) > {//获取请求方式console.log(req.method);res.end(<h2>hello user</h2>) }); //监听端口 app.lis…

delphi 第一个字符不能是小数点_元字符的详细解析

上一篇文章介绍了正则的用处以及正则中这些元字符的基本含义&#xff0c;但是如果我们只知道那些元字符的含义&#xff0c;不知道怎么使用和加以练习&#xff0c;那么对于正则我们还只是看见了门槛&#xff0c;并没有踏入&#xff0c;那么本篇文章就让我们迈起脚步正式走入正则…

前端学习(1311):请求报文

//创建网站服务器模板 const http require(http); //网站服务器对象 const app http.createServer(); //客户端有请求 app.on(request, (req, res) > {//获取请求方式//console.log(req.method);//获取请求地址//console.log(req.url);if (req.url /index || req.url /)…

jupyter中保存图片_露哥的摸爬滚打| Jupyter从零开始

今天&#xff0c;是7月的最后的一天适合结束一些东西开始一些新的东西没错我要开始新的板块啦取个名字&#xff0c;就叫做“露哥的摸爬滚打| Jupyter”01讲在前面在这里&#xff0c;主要是我的笔记或者心得&#xff0c;所以并不能保证百分百正确&#xff0c;当然也欢迎大家多多…

前端学习(1312):响应报文

//创建网站服务器模板 const http require(http); //网站服务器对象 const app http.createServer(); //客户端有请求 app.on(request, (req, res) > {//获取请求方式//console.log(req.method);//获取请求地址//console.log(req.url);//响应报文res.writeHead(200, {cont…

Java8 流式递归树形菜单

Web端常用界面 树形菜单1. 说明2. 表设计3. 普通递归4. 流式递归语法糖1. 说明 树形菜单在web后台管理系统, 权限管理中基本上很容易见到。如&#xff1a;csdn的个人后台管理系统。 只不过这个目录只有两层。三层的如下&#xff1a; 甚至可以套n层。 为什么要递归&#xff1…

catia钣金根据线段折弯_折弯大神分析钣金折弯下刀顺序

相关阅读&#xff1a;钣金折弯设计要诀&#xff0c;这就是钣金设计界的武功秘籍solidworks在钣金中折弯系数表如何设置折弯系数统计表及公司正在使用的系数表工厂在用折弯工艺规范&#xff01;折弯机模具如何选用&#xff1f;不是不能折&#xff0c;是你折弯刀不全&#xff0c;…

前端学习(1313):get请求参数

//创建网站服务器模板 const http require(http); //内置模块 const url require(url); //网站服务器对象 const app http.createServer(); //客户端有请求 app.on(request, (req, res) > {//获取请求方式//console.log(req.method);//获取请求地址//console.log(req.url…

cmd pc如何开多个微信_抖音打击刷赞刷粉,240多个百万粉丝大V被封;微信PC版再更新...

1. 微信PC版更新&#xff0c;支持在小程序中使用微信支付新榜讯 12月19日&#xff0c;微信PC端推出内测版&#xff0c;新版本支持以下新功能&#xff1a;1. 新增看一看精选内容2. 新的订阅号浏览体验3. 支持在小程序中使用微信支付2. 抖音“啄木鸟2019”行动打击刷赞刷粉&#…

回溯法 -数据结构与算法

1.回溯法算法思想&#xff1a; 定义&#xff1a; 回溯法(探索与回溯法)是一种选优搜索法&#xff0c;按选优条件向前搜索&#xff0c;以达到目标。但当探索到某一步时&#xff0c;发现原先选择并不优或达不到目标&#xff0c;就退回一步重新选择&#xff0c;这种走不通就退回再…

Idea 封装Java代码片段 快速提示

title一&#xff0c;将代码片段抽取为方法二&#xff0c;将代码封装成模板 快速提示一&#xff0c;将代码片段抽取为方法 快速生成方法快捷键 。 ctrl alt m二&#xff0c;将代码封装成模板 快速提示 步骤都在下面。 博客新域名&#xff1a; https://bitqian.blog.csdn.n…

fputc会覆盖吗_蔬菜覆盖地膜有什么好处?选择什么膜好?

大棚蔬菜种植一般都会用于地膜覆盖&#xff0c;即覆膜种植。地膜覆盖可以预先种植&#xff0c;也可以是淡季栽培&#xff0c;那么具体地膜覆盖的好处是什么呢&#xff1f;让我们来看一看地膜覆盖的好处和地膜覆盖的类型。一、用地膜覆盖蔬菜的益处1、提高地温地膜覆盖的明显效果…