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脱离标准流的情况,结果如下

相关文章
相关标签/搜索