Created by Jerry Wang, last modified on Sep 01, 2014case3: 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)(https://user-images.githubusercontent.com/5669954/28009354-6f919150-655b-11e7-95b4-c82dab750533.png)]

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