position：static(靜態定位) 當position屬性定義為static時，可以將元素定義為靜態位置，所謂靜態位置就是各個元素在HTML文檔流中應有的位置 podisition定位問題。所以當沒有定義position屬性時，並不說明該元素沒有自己的位置，它會遵循預設顯示為靜態位置，在靜態 ...
position：static(靜態定位) 當position屬性定義為static時，可以將元素定義為靜態位置，所謂靜態位置就是各個元素在HTML文檔流中應有的位置 podisition定位問題。所以當沒有定義position屬性時，並不說明該元素沒有自己的位置，它會遵循預設顯示為靜態位置，在靜態定位狀態下無法通過坐標值（top,left,right,bottom）來改變它的位置。 position：absolute(絕對定位) 當position屬性定義為absolute時，元素會脫離文檔流，完全不受文檔流的影響，根據某個參照物坐標來定位它的位置.當絕對定位元素沒有顯示的指明top,right,bottom,left定位屬性時，它還是暫時未脫離文檔流，並受文檔流的影響，具有相對定位的特性，但是它在文檔流中的位置已經不存在了。如果絕對定位只顯示的定位x軸或者Y軸，那它只具備這個方向上的定位能力，另一個方向仍然顯示為相對定位的特性。 坐標值： top:表示定位元素頂邊外壁到參照物元素頂部內壁的距離 right:表示定位元素右邊外壁到參照物元素右側內壁的距離 left:表示定位元素左邊外壁到參照物元素左側內壁的距離 bottom:表示定位元素底邊外壁到參照物元素底部內壁的距離
<div id="box">box <div id="boxA">boxA</div> <div id="boxB">boxB <div id="boxC">boxC</div> <div id="boxD">boxD</div> </div> </div>
#box{ margin:40px auto; width:400px; height:400px; border:2px red solid; } #boxA{ position:absolute; top:100px; left:100px; width:50px; height:50px; background: #3E7DB0; }
大盒子box在整個網頁中距頂部40px居中顯示，但是boxA由於position定位為絕對定位，它脫離了大盒子，距整個網頁左邊100px頂部100px，當元素定義為絕對定位，可以根據結合它的坐標屬性（top,left,bottom,right）來精確定位它的位置 position:relative(相對定位) 相對定位好似一種折中的方法，是在靜態定位和絕對定位中去一個平衡點，所謂相對定位就是使被應用的元素不脫離文檔流，卻能夠通過坐標值以原始位置為參照物進行偏移。 坐標值： top:表示定位元素頂邊外壁到原始位置頂部外壁的距離 right:表示定位元素右邊外壁到原始位置元素右側外壁的距離 left:表示定位元素左邊外壁到原始位置元素左側外壁的距離 bottom:表示定位元素底邊外壁到原始位置元素底部外壁的距離
1 <div id="box"> 2 <div id="boxA">boxA</div> 3 <div id="boxB">boxB 4 <div id="boxC">boxC</div> 5 <div id="boxD">boxD</div> 6 </div> 7 </div>
#box{ margin:40px auto; width:400px; height:400px; border:2px red solid; } #boxA{ position:relative; top:100px; left:100px; width:50px; height:50px; background: #3E7DB0; } #boxB{ width:50px; height:150px; background: #B9C8C5; } #boxC{ width:50px; height:50px; background: #1D92C8; } #boxD{ width:400px; height:50px; background: #086499; }
大盒子box在整個網頁中距頂部40px居中顯示，當元素boxA由於position定義為相對定位，相對於它本身的位置的位置進行偏移，據原先的位置左100px和頂部100px，當遇到文檔流boxD時，它會覆蓋boxD。相對定位雖然偏離了原始位置，但是它的原始位置所占據的空間仍然保留著，並沒有被其它元素所占據。
position：fixed(固定定位)
固定定位是絕對定位的一種特殊形式，它是以瀏覽器視窗作為參照物來定義網頁元素，如果定義某個元素固定顯示，則該元素不在受文檔流的影響。他始終以瀏覽器視窗來定位自己顯示的顯示位置，不管瀏覽器視窗如何滾動，也不管瀏覽器視窗大小如何變化，該元素都會顯示在瀏覽器視窗內。通俗的說就是以瀏覽器視窗的四條邊作為坐標系來定位元素的位置。
1 <div id="box">box </div> 2 <div id="fixed">fixed</div>
1 #box{ 2 margin:40px auto; 3 width:400px; 4 height:400px; 5 border:2px red solid; 6 position:fixed; 7 left:100px; 8 top:100px; 9 } 10 #fixed{ 11 height:4000px; 12 }
當把box定義為固定定位時，box永遠都是在瀏覽器視窗內，fixed屬性還可通過left，right,top,bottom來控制從流浪器不同邊框來進行定位。
相對定位(relative)與絕對定位(absolute)：
<div id="box">box <div id="boxA">boxA</div> <div id="boxB">boxB <div id="boxC">boxC</div> <div id="boxD">boxD</div> </div> </div>
如果box把 position屬性定義為relative，只有它的子元素boxA和boxB position屬性定義為absolute才能相對box定位，而他的孫子元素boxC和boxD把position定義為absolute並不能相對box來定位。但是如果把boxB的position屬性定義為relative，它底下的子元素boxC和boxD就能相對於父元素boxB來定位，所以，把position屬性定義為relative的元素，只有它的子元素才能相對它定位，孫子元素並不能相對它定位。相對定位與絕對定位的結合使用可以更加精確的控制網頁元素，設計出更強大的佈局效果。
position屬性定位小工具：www.linxz.de/css_tool/position_demo.html 層疊： css可以通過z-index屬性來排列不同定位元素之間的層疊順序，該屬性可以設置任何整數值，數值越大，所排列的順序越靠前。1 <div id="box">box 2 <div id="boxA">boxA</div> 3 <div id="boxB">boxB</div> 4 <div id="boxC">boxC</div> 5 </div>
1 #boxA,#boxB,#boxC{ 2 width:100px; 3 height:200px; 4 position:absolute; 5 } 6 #boxA{ 7 background: #086499; 8 z-index:1; 9 left:100px; 10 } 11 #boxB{ 12 top:50px; 13 left:50px; 14 background: #B9C8C5; 15 z-index:2; 16 } 17 #boxC{ 18 top:100px; 19 background: #1D92C8; 20 z-index:3; 21 }
boxC排在最上面，boxB在最中間，boxA在最後。z-index的值越大越靠前。
第一次寫博客，寫的不好，請各位看官多多指正。
