我们先来看看CSS3 Api中对position属性的相关定义：

  • static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。
  • relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
  • absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
  • fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。

怎么样，是不是还是很迷糊~~ 没关系，下面就从几个基础概念一一给大家详述：

什么是文档流？

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。

静态定位(static) ：

static，无特殊定位，它是html元素默认的定位方式，即我们不设定元素的position属性时默认的position值就是static，它遵循正常的文档流对象，对象占用文档空间，该定位方式下，top、right、bottom、left、z-index等属性是无效的。

相对定位(relative) ：

relative定位，又称为相对定位，从字面上来解析，我们就可以看出该属性的主要特性：相对。但是它相对的又是相对于什么地方而言的呢？这个是个重点，也是最让我迷糊的一个地方，现在让我们来做个测试，我想大家都会明白的：

(1) 初始未定位

  1. /******初始*********/
  2. <style type="text/css">
  3. #first { width: 200px; height: 100px; border: 1px solid red; }
  4. #second{ width: 200px; height: 100px; border: 1px solid blue;}
  5. </style>
  6. <body>
  7. <div id="first"> first</div>
  8. <div id="second">second</div>
  9. </body>

初始原图：

(2) 我们修改first元素的position属性：

  1. <style type="text/css">
  2. #first{ width: 200px; height: 100px; border: 1px solid red; position: relative; top: 20px; left: 20px;} /*add position*/
  3. #second{width: 200px; height: 100px; border: 1px solid blue;}
  4. </style>

相对偏移20px后：

 -- >> 虚线是初始的位置空间

现在看明白了吧，相对定位相对的是它原本在文档流中的位置而进行的偏移，而我们也知道relative定位也是遵循正常的文档流，它没有脱离文档流，但是它的top/left/right/bottom属性是生效的，可以说它是static到absoult的一个中间过渡属性，最重要的是它还占有文档空间，而且占据的文档空间不会随 top / right / left / bottom 等属性的偏移而发生变动，也就是说它后面的元素是依据虚线位置( top / left / right / bottom 等属性生效之前)进行的定位，这点一定要理解。

那好，我们知道了top / right / left / bottom 属性是不会对relative定位的元素所占据的文档空间产生偏移，那么margin / padding会让该文档空间产生偏移吗？答案是肯定的，我们一起来做个试验吧：

(3)   添加margin属性：

  1. <style type="text/css">
  2. #first{width: 200px;height: 100px;border: 1px solid red;position: relative;top: 20px;left: 20px;margin: 20px;} /* add margin*/
  3. #second{width: 200px;height:100px;border: 1px solid blue;}
  4. </style>

设置margin：20px后：

对比一下，是不是就很清晰了，我们先将first元素外边距设为20px，那么second元素就得向下偏移40px，所以margin是占据文档空间！同理，大家可以自己动手测下padding的效果吧！

绝对定位(absoulte) ：

absoulte定位，也称为绝对定位，虽然它的名字号曰“绝对”，但是它的功能却更接近于"相对"一词，为什么这么讲呢？原来，使用absoult定位的元素脱离文档流后，就只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以postion非static方式定位的， 举个例子，a元素使用absoulte定位，它会从父类开始找起，寻找以position非static方式定位的祖先类元素(注意，一定要是直系祖先才算哦~），直到<html>标签为止，这里还需要注意的是，relative和static方式在最外层时是以<body>标签为定位原点的，而absoulte方式在无父级是position非static定位时是以<html>作为原点定位。<html>和<body>元素相差9px左右。我们来看下效果：

(4) 添加absoulte属性：

  1. <html>
  2. <style type="text/css">
  3. html{border:1px dashed green;}
  4. body{border:1px dashed  purple;}
  5. #first{ width: 200px;height: 100px;border: 1px solid red;position: relative;}
  6. #second{ width: 200px;height: 100px;border: 1px solid blue;position: absolute;top :0;left : 0;}
  7. </style>
  8. <body>
  9. <div id="first">relative</div>
  10. <div id="second">absoult</div>
  11. </body>
  12. </html>

效果图：

哈哈，看了上面的代码后，细心的朋友肯定要问了，为什么absoulte定位要加 top:0; left:0; 属性，这不是多此一举呢？

其实加上这两个属性是完全必要的，因为我们如果使用absoulte或fixed定位的话，必须指定 left、right、 top、 bottom 属性中的至少一个，否则left/right/top/bottom属性会使用它们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递，简单讲就是都变成relative，会占用文档空间，这点非常重要，很多人使用absolute定位后发现没有脱离文档流就是这个原因，这里要特别注意~~~

少了left/right/top/bottom属性不行，那如果我们多设了呢？例如，我们同时设置了top和bottom的属性值，那元素又该往哪偏移好呢？记住下面的规则：

  • 如果top和bottom一同存在的话，那么只有top生效。
  • 如果left和right一同存在的话，那么只有left生效。

既然absoulte是根据祖先类中的position非static元素进行定位的，那么祖先类中的margin/padding会不会对position产生影响呢？看个例子先：

(5) 在absoulte定位中添加margin / padding属性：

  1. #first{width: 200px;height: 100px;border: 1px solid red;position: relative;margin:40px;padding:40px;}
  2. #second{width: 200px;height:100px;border: 1px solid blue;position: absolute;top:20px;left:20px;}
  3. <div id="first">first
  4. <div id="second">second</div>
  5. </div>

效果图：

看懂了，祖先类的margin会让子类的absoulte跟着偏移，而padding却不会让子类的absoulte发生偏移。总结一下，就是absoulte是根据祖先类的border进行的定位。

Note : 绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。

固定定位(fixed)：

fixed定位，又称为固定定位，它和absoult定位一样，都脱离了文档流，并且能够根据top、right、left、bottom属性进行定位，但不同的是fixed是根据窗口为原点进行偏移定位的，也就是说它不会根据滚动条的滚动而进行偏移。

z-index属性：

z-index，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠，如果两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。需要注意的是，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。

Note：使用static 定位或无position定位的元素z-index属性是无效的

css中的position 的absolute和relative的区别（转）的更多相关文章

  1. CSS中应用position的absolute和relative的属性制作浮动层

    我的浮动层结构大概如下: <div id="father"> <div id="son"> </div> </div& ...

  2. position属性absolute与relative 的区别

    连接:https://www.cnblogs.com/duyanli/p/3534005.html 每次要用到Position属性时,总要去搜索下,这两个属性值的区别:今天就直接复制网上的结果,以便以 ...

  3. css中的position:relative和absolute 属性

    语法: position : static | absolute | fixed | relative 取值: static :默认值.无特殊定位,对象遵循HTML定位规则 absolute :将对象 ...

  4. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  5. Position属性四个值：static、fixed、absolute和relative的区别和用法

    Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...

  6. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  7. css中关于position属性的探究（原创）

    关于position属性的设置,头脑中一直觉得不是很清楚,所以借助这次机会单独自己测试了一下,记作学习笔记.   首先,css的position属性包含下面四种设置情况: static:默认属性.指定 ...

  8. 装载：对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

  9. 关于css中的position定位

    希望这波position可以有帮助^_^! css中的position属性主要分为:static.relative.absolute.fixed.center.page.sticky(红色是css3中 ...

随机推荐

  1. （十九）C语言之指针

  2. SRS之SrsRtmpConn::publishing详解

    1. SrsRtmpConn::publishing int SrsRtmpConn::publishing(SrsSource* source) { int ret = ERROR_SUCCESS; ...

  3. 打开下载CA root 证书的链接失败

    下载CA root 证书 http://adip/certsrv server error or refuse to connect 这是由于AD上没有安装Active Directory Certi ...

  4. 报错：SQLSTATE[23000]: Integrity constraint violation: 1062 Duplicate entry 'admin' for key 'username'

    在提交注册信息的时候报错:SQLSTATE[23000]: Integrity constraint violation: 1062 Duplicate entry 'admin' for key ' ...

  5. ccf 201409-3 字符串匹配(toupper,tolower)

     ccf 201409-3 字符串匹配(toupper,tolower) 问题描述 给出一个字符串和多行文字,在这些文字中找到字符串出现的那些行.你的程序还需支持大小写敏感选项:当选项打开时,表示同一 ...

  6. background-color 属性

    background-color:transparent;是什么意思?? 把背景颜色设为透明色

  7. 多线程分配线程的实现方案：CountDownLatch类

    需求:假如我们本地有4个文件需要解析,每个文件的内容为20万行.为了提高效率我们要创建4个线程进行处理.等4个线程处理完,要在文件日志表中记录处理状态. 一般的的解决方法是使用join,join用于让 ...

  8. python - linux下 no module named pip

    有网络的情况下,linux系统提示无法使用pip命令: 有两种解决方式: 第一种: =============================== 敲命令:python -m ensurepip 得到 ...

  9. Tag 标签

    用于标记和选择. 基础用法 由type属性来选择tag的类型,也可以通过color属性来自定义背景色. <el-tag>标签一</el-tag> <el-tag type ...

  10. tensorflow实现线性回归、以及模型保存与加载

    内容:包含tensorflow变量作用域.tensorboard收集.模型保存与加载.自定义命令行参数 1.知识点 """ 1.训练过程: 1.准备好特征和目标值 2.建 ...