CSS中position属性总结

总结一下CSS中的position属性吧！！

定义：

在CSS中关于position定位的内容是：
                                    position: relative | absolute | static | fixed

 

static(静态) 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。

relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。

absolute(绝对定位) 对象可层叠、脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

fixed(固定定位)这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

 

解释：

1、想要使用z-index属性进行层次分级是，就必须要设置position属性并且不能为static。

2、相对定位与绝对定位的有关脱离文档流

relative虽然脱离了文本流，但是原先的位置也会被保留。只是相对于原先的位置，通过top、left、bottom、right设置元素的偏移。相当于人走了，位置还保留着。

CSS代码

*{ margin:0px; padding:0px;}
div{ background:#0F0; width:100px; height:100px; border:1px solid #000;}

#div3{ position: relative; left:200px; bottom:100px;}

body体内

<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>
<div id="div7">
<p>我是div7,是div6的父亲</p>
<div id="div6">div6</div>
</div>

结果为

 

absolute(绝对定位)不光脱离了文本流，而且在文本流中也不会给这个绝对定位元素留下专属空位。移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL(TOP、RIGHT、BOTTOM、LEFT)来设置元素，使之处在任何一个位置。在父层position属性为默认值时，TRBL的坐标原点以body的坐标原点为起始。相当于人走了，位置也就撤销了。绝对定位不影响文本流，其它元素直接可以与绝对定位的元素重叠。如果没有指定绝对定位的TEBL，那么该元素放于正常的文本流，但是在此处可以发生重叠。
添加css代码

#div5{ position:fixed;top:300px; left:300px; background-color:#C09; float:right; }
#div6{ position: absolute; left:300px; top:50px;}

这是div7没有脱离标准流的情况，结果如下

CSS代码改变如下

#div5{ position:fixed;top:300px; left:300px; background-color:#C09; float:right; }
#div6{ position: absolute; left:300px; top:50px;}
#div7{ position:absolute;}

或者#div7{ position:relative;}

这是div7脱离标准流的情况，结果如下