CSS Layout - The position Property
一直搞不清楚 CSS 排版相關細節，參考這篇：CSS Layout - The position Property
HTML element 的屬性 position 可以有四種 values : static (default), relative, absolute, fixed。static 是缺省默認值，fixed 參照的是 ViewPort 座標。比較讓人混淆的是 relative 跟 absolute，注意下面的用例，relative 不會影響其他已經 rendered 的 elements，但 absolute 會讓其他 elements 調整位置填補空位。
An element with position: relative; is positioned relative to its normal position:
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
<style>
div.toAbsolute:hover {
position: absolute;
left: 30px;
top: 30px;
border: 3px solid #DA3712;
}
div.toRelative:hover {
position: relative;
left: 10px;
top: 10px;
border: 3px solid #12DA37;
}
div.toRelative, div.toAbsolute{
border: 3px solid #73AD21;
}
</style>
<div class="toRelative">
hover this div element to change position: relative;
</div>
<div class="toAbsolute">
hover this div element to change position: absolute;
</div>
. reply_count: 0 get_replies : 0 .
