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，最後布局如下:
