DIV的Position屬性和DIV嵌套DIV

1.前言 
我們在利用div+css進行布局時，常常被div的位置弄的焦頭爛額，很多人甚至放棄了div而直接用table。這里一如既往的推薦使用div布局，其實我們只要掌握了div的position屬性和div的float屬性，布局是非常靈活的，這里詳細說一下div的position，沒想象中那么簡單，也沒想象中那么復雜。 

2.position的四種取值 
static:static定位就是不定位，出現在哪里就顯示在哪里，這是默認取值，只有在你想覆蓋以前的定義時才需要顯示指定 
relative:relative 就是相對元素static定位時的位置進行偏移，如果指定static時top是50象素，那么指定relative並指定top是10象素時，元素實際top就是60象素了。 
absolute:absolute絕對定位，直接指定top、left、right、bottom。有意思的是絕對定位也是“相對”的。它的坐標是相對其容器來說的。容器又是什么呢，容器就是離元素最近的一個定位好的“祖先”，定位好的意思就是其Position是absolute或fixed或relative。如果沒有這個容器，那就使用瀏覽器初始的，也就是body或者html元素。標准是說只需要指定left和right，width可以自動根據容器寬度計算出來，可惜ie不支持。 
fixed:fixed才是真正的絕對定位，其位置永遠相對瀏覽器位置來計算。而且就算用戶滾動頁面，元素位置也能相對瀏覽器保持不變，也就是說永遠可以看到，這個做一些彩單的時候可以用。可惜的是ie還不支持 

3.relative,absolute,fixed需要指定具體位置 
relative,absolute,fixed如果不指定它的top,left等屬性，那么它的position實際上依然是static。使用了relative,absolute,fixed就必須指定具體的位置。 

4.關於DIV的嵌套 
我們設定外層div的名字為div1,內層div的名字為div2 

4.1如果div1的position是static，說明div2位置是出現在哪里就顯示在哪里。如下圖： 

div1的position是static，div2的position是absolute，這樣div2就不受外層div的約束了。如果div2的position是relative，top:20px;但實際上，div2距離頂端是36px(大於20px)，不知道是不是瀏覽器的bug，ie和Firefox都如此。 
代碼如下 

Java代碼

<div style="position:static;width:600px;height:400px;background:#FFE4C4;">  
position:static;width:600px;height:400px;background:#FFE4C4  
    <div style="position:relative;top:20px;left:10px;width:500px;height:350px;background:#D2691E">position:absolute;top:20px;left:10px;width:500px;height:350px;background:#D2691E  
    </div>  
</div> 

 

 

4.2如果div1的position是relative，這樣div2的position不管是relative還是absolute，顯示的效果基本是一樣的，都是內層div針對外層div的位置。如下圖： 

不過這兩者還有有區別的，如兩張圖片。如果div2的position是relative，top:20px;但實際上，div2距離頂端是36px(大於20px)，但如果div2的position是absolute，top:20px;div2距離頂端的高度就精確的是20px。 
代碼如下 

Javascript代碼

<div style="position:relative;width:600px;height:400px;background:#FFE4C4;">  
position:relative;width:600px;height:400px;background:#FFE4C4  
    <div style="position:absolute;top:20px;left:10px;width:500px;height:350px;background:#D2691E">position:absolute;top:20px;left:10px;width:500px;height:350px;background:#D2691E  
    </div>
</div> 

 

4.3如果div1的position是absolute，這樣div2的position也是absolute，那么div2的位置實際上是一個相對位置。如下圖： 

5.如果div的position是fixed，就不用說了，其位置永遠相對瀏覽器位置來計算。 

6.問題 
從div的嵌套可以看出：position:relative，top:20px;無論是上級div的position是什么屬性，實際上距離頂端總是大於20px。解決方案也很簡單，不用top而用margin來代替。或者根據實際情況微調下。 

 

轉自http://ggmmy.blog.163.com/blog/static/2062262882012111962629751/