Created by Jerry Wang, last modified on Sep 01, 2014
<html>
<div><span style="color: rgb(64,64,64);"></html></span></div>
<div>
<div><style type="text/css"></div>
<div>.highlight </div>
<div>{</div>
<div> <a href="http://background-coloryellow">background-color:yellow</a>;</div>
<div> <a href="http://text-decorationunderline">text-decoration:underline</a>;</div>
<div> width: 100px;</div>
<div> height: 100px;</div>
<div> display: block;</div>
<div>}</div>
<div>.div1{</div>
<div><span class="Apple-tab-span"> </span>background-color: red;</div>
<div><span class="Apple-tab-span"> </span>width: 100px;</div>
<div><span class="Apple-tab-span"> </span>position: absolute;</div>
<div><span class="Apple-tab-span"> </span>top: 90px;</div>
<div><span class="Apple-tab-span"> </span>left: 50px;</div>
<div>}</div>
<div>.div2{</div>
<div><span class="Apple-tab-span"> </span>background-color: blue;</div>
<div><span class="Apple-tab-span"> </span>width: 100px;</div>
<div><span class="Apple-tab-span"> </span>left: 100px;</div>
<div>}</div>
<div>.rule100{</div>
<div><span class="Apple-tab-span"> </span>background-color: black;</div>
<div><span class="Apple-tab-span"> </span>width: 100px;</div>
<div>}</div>
<div></style></div>
<div><p>Jerry's <span class = "highlight">Hello</span></p></div>
<div><div class="div1">div1</div>
<div><span class="Apple-tab-span"> </span><div class="div2">div2</div></div>
<div></div></div>
<div><div class="rule100">"100px"</div></div>
<div></html></div>
<div>case 1： 当#div2 position为缺省值static（Elements render in order, as they appear in the document flow）时，按照其在document flow内的位置进行布局:</div></div>
<div><div>
</div></div>
<div>
<div>case2: <a href="http://positionabsolute">position:absolute</a>( <span>The element is positioned relative to its first positioned (not static) ancestor element ).</span></div>
<div><span>因为现在div1的position布局为absolute，则div2会按照div1的相对位置进行布局。div1 start x offset = 50px, div2本身的left = 100px, 因此div2以相对于document 100+50 = 150px的起始位置进行布局:</span></div>
<div><span><br></span></div>
<div><span>注意在absolute的情况下，div2不仅位置改变，同时也脱离了document flow，因此其原来在div1内的位置已经不再存在:</span></div>
<div><span><div>
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倍高度。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bfej2vQc-1616760888508)(user-images.githubusercontent.com/5669954/280…)]
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，最后布局如下:
\