-
relative
-
absolute
-
fixed
-
static
1.relative
相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現在它所在的位置上。然後，可以通過設置垂直或水平位置，讓這個元素“相對於”它的起點進行移動。<div class="parent">
<div>child 1</div>
<div style="position:relative;left:20px;top:20px;">child 2</div>
<div>child 3</div>
</div>
2.absolute
絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。對於定位的主要問題是要記住每種定位的意義。絕對定位是“相對於”最近的已定位祖先元素，如果不存在已定位的祖先元素，那麼“相對於”最初的包含塊。如果要設定元素與其父元素的絕對位置定位就必須設定父元素的定位。
註釋：根據用戶代理的不同，最初的包含塊可能是畫布或 HTML 元素。
<div class="parent" style="position:relative;"<!--如果該處不定位，那麼child5框的定位是相對於最初的包含塊!-->>
<div>child 4</div>
<div style="position:absolute;left:20px;top:20px;">child 5</div>
<div>child 6</div>
</div>
3.fixed
元素框的表現類似於將 position 設置爲 absolute，不過其包含塊是視窗本身。<div class="parent">
<div>child 7</div>
<div style="position:fixed;right:20px;top:20px;">child 8</div>
<div>child 9</div>
</div>
child8位置是以視察本身爲參考的，即瀏覽器可視窗口。如下圖
4.static
元素框正常生成。塊級元素生成一個矩形框，作爲文檔流的一部分，行內元素則會創建一個或多個行框，置於其父元素中。
<div class="parent">
<div>child 10</div>
<div style="position:static;right:20px;top:20px;">child 11</div>
<div>child 12</div>
</div>
----------------------------------------------------------------------------------------------------------------------------
本文例子代碼：
<html>
<head>
<style type="text/css">
p{
font-size:11pt;
color:#363636;
text-indent:2em;
}
.parent{
width:500px;
height:150px;
margin-top:20px;
margin-left:20px;
border:solid 1px #555555;
background:#aaaaaa;
}
.parent div{
width:100px;
height:80px;
float:left;
background:#708090;
border:dashed 1px #008B8B;
font-size:12pt;
font-weight:bold;
color:#104E8B;
}
</style>
</head>
<body>
<!--相對定位!-->
<h2>relative</h2>
<p>相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現在它所在的位置上。然後，可以通過設置垂直或水平位置，讓這個元素“相對於”它的起點進行移動。</p>
<div class="parent">
<div>child 1</div>
<div style="position:relative;left:20px;top:20px;">child 2</div>
<div>child 3</div>
</div>
<!--絕對定位!-->
<h2>absolute</h2>
<p>絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。
對於定位的主要問題是要記住每種定位的意義。</p>
<p>絕對定位是“相對於”最近的已定位祖先元素，如果不存在已定位的祖先元素，那麼“相對於”最初的包含塊。所以如果要設定元素與其父元素的絕對位置定位就必須設定父元素的定位。</p>
<p>註釋：根據用戶代理的不同，最初的包含塊可能是畫布或 HTML 元素。</p>
<div class="parent" style="position:relative;"<!--如果該處不定位，那麼child5框的定位是相對於最初的包含塊!-->>
<div>child 4</div>
<div style="position:absolute;left:20px;top:20px;">child 5</div>
<div>child 6</div>
</div>
<!--相對定位!-->
<h2>fixed</h2>
<p>元素框的表現類似於將 position 設置爲 absolute，不過其包含塊是視窗本身。</p>
<div class="parent">
<div>child 7</div>
<div style="position:fixed;right:20px;top:20px;">child 8</div>
<div>child 9</div>
</div>
<!--相對定位!-->
<h2>static</h2>
<p>元素框正常生成。塊級元素生成一個矩形框，作爲文檔流的一部分，行內元素則會創建一個或多個行框，置於其父元素中。</p>
<div class="parent">
<div>child 10</div>
<div style="position:static;right:20px;top:20px;">child 11</div>
<div>child 12</div>
</div>
</body>
</html>