css position relative and absolute布局
- 2019 年 10 月 4 日
- 筆記
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://jerry.blog.csdn.net/article/details/100919505
Created by Jerry Wang, last modified on Sep 01, 2014
</html>
<style type="text/css">
.highlight
{
width: 100px;
height: 100px;
display: block;
}
.div1{
background-color: red;
width: 100px;
position: absolute;
top: 90px;
left: 50px;
}
.div2{
background-color: blue;
width: 100px;
left: 100px;
}
.rule100{
background-color: black;
width: 100px;
}
</style>
<p>Jerry's <span class = "highlight">Hello</span></p>
<div class="div1">div1
<div class="div2">div2</div>
</div>
<div class="rule100">"100px"</div>
</html>
case 1： 当#div2 position为缺省值static（Elements render in order, as they appear in the document flow）时，按照其在document flow内的位置进行布局:
case2: position:absolute( The element is positioned relative to its first positioned (not static) ancestor element ).
因为现在div1的position布局为absolute，则div2会按照div1的相对位置进行布局。div1 start x offset = 50px, div2本身的left = 100px, 因此div2以相对于document 100+50 = 150px的起始位置进行布局:
注意在absolute的情况下，div2不仅位置改变，同时也脱离了document flow，因此其原来在div1内的位置已经不再存在:
case3: position: relative ( The element is positioned relative to its normal position ).
div2原本在div1内的位置为相对document偏移50px，因此最后的水平方向偏移为150px. div2虽然从表面上看已经偏离了原来的位置，但是实际上在document flow中仍然未改变，因此从视觉上相比case2，case3中的div1具有case2的2倍高度。
case4: div1的position设置为static. 此时top attribute则不再起作用。
case5: div1的position设置仍然为static，body的position为absolute. div2的css:
.div2{
background-color: blue;
width: 100px;
left: 200px;
top: -40px;
position: absolute;
}
div2在ui上消失，因为其y坐标在原点上方，并且从document flow里移除，因此div1的高度同case2.
如果div2改为relative，则其y坐标为static case下的值减去40，最后布局如下:
