我们先来看看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) 初始未定位

[html] view plaincopyprint?

  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属性：

[html] view plaincopyprint?

  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属性：

[html] view plaincopyprint?

  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属性：

[html] view plaincopyprint?

  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属性：

[html] view plaincopyprint?

  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 | static | fixed )详解的更多相关文章

  1. 【转】CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  2. css中position属性(absolute|relative|static|fixed)概述及应用

    position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...

  3. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  4. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  5. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  6. 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html

    深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...

  7. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  8. CSS position属性absolute relative等五个值的解释

    DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...

  9. CSS中position属性 （absolute，relative，static，fixed）

    只要position的属性值设置的不是默认的值则定位的元素都将脱离文档流 1.static是position的默认的值,按照正常的文档流进行排版,设置了该属性值得元素的top,left属性均不起作用. ...

随机推荐

  1. activemq学习

    一.特性及优势 1.实现JMS1.1规范,支持J2EE1.4以上2.可运行于任何jvm和大部分web容器(ActiveMQ works great in any JVM)3.支持多种语言客户端(jav ...

  2. 关于文件读写IDL

    1.打开文件 IDL从磁盘上的文件读写数据,必须首先把一盒逻辑设备号连接到一个指定的文件,然后进行文件操作,如打开,关闭和读取等.IDL中的逻辑设备号的范围是-2——128,其中1-99是用户可以任意 ...

  3. UIImage将图片写入本地相册

    UIImageWriteToSavedPhotosAlbum(<#UIImage *image#>, <#id completionTarget#>, <#SEL com ...

  4. msf常用命令

    msf > search -r great -t exploits search命令查找rank为great的exploit msf > setg RHOST 192.168.1.102 ...

  5. PAT (Advanced Level) 1051. Pop Sequence (25)

    简单题. #include<iostream> #include<cstring> #include<cmath> #include<algorithm> ...

  6. 【转载】彻底弄懂css中单位px和em,rem的区别

    原文链接:http://www.cnblogs.com/leejersey/p/3662612.html 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什 ...

  7. Bootstrap登录样式

    样式1 <!--bs中所有的均应该包裹在其中.--> <div class="container"> <!-- row是珊栏系统的包裹容器--> ...

  8. download plugin update site for offline installation

    Reference Eclipse Launcher Running update manager from command line   好多次为window下的eclipse不能拿到linux下直 ...

  9. 可用类型的几何对象esriGeometryType Constants

    The available kinds of geometry objects. Constant Value Description esriGeometryNull 0 A geometry of ...

  10. Android学习笔记之Service

    与服务通信 用bindservice 而startservice并无通信条件. service 为android为系统服务,所以程序员无法new出来,只能建立服务,共其他组件使用. package c ...