position:absolute;
绝对定位,是相对于 最近的一次定位(绝对定位,相对定位,和 固定定位都可以,只要是定位都可以,float不行,margin不行)的祖先(父辈及以上)元素(与父辈同级的元素无效)。 不是相对于 浏览器,也不是相对于 父元素。如果找不到符合条件的,则是相对于 body元素进行定位。
并且设置之后,其本身的文档流会删除,等于消失了一样。
fixed是相对于浏览器定位。
relative是相对于原位置定位,其仍然占据原位置。只是表现的位置不一样了。
<html> <head> <style type="text/css"> *{ padding:0px; margin:0px;} h2.pos_abs { position:absolute; left:0px; top:0px } div.d1{ width:100px; height:100px; background-color: aquamarine; position: absolute; left:20px; } div.d2{ width:50px; height:50px; background-color: chartreuse; } div.d3{ width:50px; height:50px; background-color: red; /* position: absolute; left:50px; 这块注释取消 会看到 绝对定位 不是相对于 叔辈元素,而且会绝对定位会删除原本占据的位置。 */ } </style> </head> <body> <div class="d1"> <div class="d3"> </div> <div class="d2"> <h2 class="pos_abs">aaaaaaaaaa</h2> </div > </div> </body> </html>
aaaaaa包含在 d2中,d2是绿色,无绝对定位。位置处在d3 红色之下。
d1进行了绝对定位。
但是aaaa出现的位置是与d1相关的。而不是与包着着它的d2中。
注释里的内容也是知识点,需要看一下
代码效果图