CSS定位與層疊

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:表示定位元素底邊外壁到原始位置元素底部外壁的距離

<div id="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: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(固定定位)

固定定位是絕對定位的一種特殊形式，它是以瀏覽器窗口作為參照物來定義網頁元素，如果定義某個元素固定顯示，則該元素不在受文檔流的影響。他始終以瀏覽器窗口來定位自己顯示的顯示位置，不管瀏覽器窗口如何滾動，也不管瀏覽器窗口大小如何變化，該元素都會顯示在瀏覽器窗口內。通俗的說就是以瀏覽器窗口的四條邊作為坐標系來定位元素的位置。

<div id="box">box </div> 
<div id="fixed">fixed</div>

#box{
 margin:40px auto;
 width:400px;
 height:400px;
 border:2px red solid;
 position:fixed;
left:100px;
top:100px; 
}
#fixed{
 height:4000px;
}

當把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 屬性來排列不同定位元素之間的層疊順序，該屬性可以設置任何整數值，數值越大，所排列的順序越靠前。

 <div id="box">box
  <div id="boxA">boxA</div>
  <div id="boxB">boxB</div>
  <div id="boxC">boxC</div>
 </div>

#boxA,#boxB,#boxC{
 width:100px;
 height:200px;
 position:absolute;
}
#boxA{
 background: #086499;
 z-index:1;
 left:100px;
}
#boxB{
 top:50px;
 left:50px;
 background: #B9C8C5;
 z-index:2;
}
#boxC{
 top:100px;
 background: #1D92C8;
 z-index:3;
}

boxC排在最上面，boxB在最中間，boxA在最后。z-index的值越大越靠前。

第一次寫博客，寫的不好，請各位看官多多指正。