css絕對位置、相對定位和文檔流的那些事

標籤：style   blog   http   os   io   ar   div   問題   代碼   

原文連結：http://www.cnblogs.com/tim-li/archive/2012/07/09/2582618.html

前言

    接觸html、和css時間也不短了，但每次用div+css布局的時候心裡還是有點兒虛,有時候乾脆就直接用table算了,很多時候用div會出現些不可預料的問題,雖然花費一定時間能夠解決，但總不是個事，所以今天特地探索了下css+div的絕對位置和相對定位和文檔流的關係。

 

文檔流的概念

    確切的說應該是文檔文檔流模型的機制，html的布局機制就是用文檔流模型的，即塊元素（block）獨佔一行，內嵌元素（inline）。不獨佔一行

 

如區塊層級元素(block)

<div>div1</div><div>div2</div>

效果如下

 

ok，那麼怎麼知道這不是因為沒有設定高和寬的樣式而出現的情況呢，我們聽鄧爺爺的話，實踐是檢驗真理的唯一標準

<div style=" width:100px; height:100px;">div1</div><div style=" width:100px; height:100px;">div2</div>

效果如下：額，沒坑你吧...

 

又如內嵌元素(inline)

<img src="Image/close.gif" alt="圖片" style=" height:100px; width:100px;"/><a href="http:">超連結1</a><a href="http:">超連結2</a>

效果如下：可以看到內嵌元素後跟內嵌元素不會另起一行

 

我們再試下inline 後加 block

<img src="Image/close.gif" alt="圖片" style=" height:100px; width:100px;"/><a href="http:">超連結1</a><a href="http:">超連結2</a><div style=" width:100px; height:100px;">div1</div>

效果如下：可以看到div1（block）是另起一行獨佔的

 

相對定位 position:relative

    故名思意，相對定位就應該是相對於一個東西來定位，而這個東西是什麼呢？其實這個東西不是什麼，就是元素自己本身，用left right top b0ttom進行定位後，元素會根據原來的位置進行移動，但由於position:relative這個屬性並沒有脫離文檔流的，所以元素本身所佔的位置會保留。

下面來做個實驗，一看你就懂了- -

<div style=" width:100px; height:100px;">div1</div><div style=" width:100px; height:100px;">div2</div><div style=" width:100px; height:100px;">div3</div>

效果如下：這是沒有加入position:relative文檔流的預設排法

 

我們給div2加position:relative 並用top:-20px;left:50px進行相對移動

<div style=" width:100px; height:100px;">div1</div><div style=" width:100px; height:100px; position:relative; top:-20px; left:50px;">div2</div><div style=" width:100px; height:100px;">div3</div>

效果如下：額，為了給大家看到效果還有省了ps的勁直接截了ide的圖...但我保證在瀏覽器裡他也是這麼排的。我們可以看到藍色邊框就是div2原來的位置，黑色邊框就是通過position:relative相對於原來的位置左移50px; 上移20px得到的，而且我們看以看到，div3並沒有因為div2的上移而上移了，原因就是position:relative這個屬性是沒有脫離文檔流的，所以元素本身所佔的位置會保留。

絕對位置 position:absolute

    好吧終於有點戲肉了，文檔流那複雜的玩意我們先不理，所謂絕對位置，其實也要找個東西來相對來絕對的，而這個東西就是元素的第一個有position，且positon不能為static的祖先元素，是不是有點拗口，換個說法吧，就是這個小鬼（element）的定位可以是他的老爸，他的爺爺，他的太公....（祖先要素）中而且第一個是是有錢的（position:absolute）或者是當官的（position:relative），就是不能是個程式猿（position:static 或者沒有設position）的。而且值得注意的是position:absolute這個屬性是脫離文檔流的，所以重新置放後元素是不會佔著原來的位置的

還是跟著程式來吧- -

  <div style=" border:1px solid Red; padding:10px; width: 340px; height: 400px"">    紅色：太公        <div style="border:1px solid Green; padding:10px; width: 320px; height: 360px"">        綠色：爺爺            <div style="border:1px solid Yellow; padding:10px; width: 300px; height: 320px; ">            黃色：老爸                <div style="width: 100px; height: 100px;">                    div1</div>                <div style="width: 100px; height: 100px;">                    div2</div>                <div style="width: 100px; height: 100px;">                    div3</div>            </div>        </div>    </div>

效果如下：首先給div1 div2 div3三個祖先div 黃色的老爸， 綠色的爺爺， 紅色的太公，暫時對他們都不設position屬性

 

好吧，現在給老爸div設position:relative（喲！當官的）給div2設position:absolute;left:120px; top:100px;

    <div style=" border:1px solid Red; padding:10px; width: 340px; height: 400px"">    紅色：太公        <div style="border:1px solid Green; padding:10px; width: 320px; height: 360px"">        綠色：爺爺            <div style="border:1px solid Yellow; padding:10px; width: 300px; height: 320px; position:relative;">            黃色：老爸                <div style="width: 100px; height: 100px;">                    div1</div>                <div style="width: 100px; height: 100px; position:absolute; left:120px; top:100px;">                    div2</div>                <div style="width: 100px; height: 100px;">                    div3</div>            </div>        </div>    </div>

效果如下：可以從藍色線看出，div2以黃色（ide的藍線和黃色混在一起變色了）div為參照距離老爸左邊120px 上邊100px而且有於position:absolute是脫離文檔流的所以div2原來的位置不能保留div3向上填充

 

 我們再用他爺爺來試試

<div style=" border:1px solid Red; padding:10px; width: 340px; height: 400px">    紅色：太公        <div style="border:1px solid Green; padding:10px; width: 320px; height: 360px; position:relative;">        綠色：爺爺            <div style="border:1px solid Yellow; padding:10px; width: 300px; height: 320px; ">            黃色：老爸                <div style="width: 100px; height: 100px;">                    div1</div>                <div style="width: 100px; height: 100px; position:absolute; left:120px; top:100px;">                    div2</div>                <div style="width: 100px; height: 100px;">                    div3</div>            </div>        </div>    </div>

效果如下：還是div2還是 position:absolute;left:120px;top:100px,可以沖藍色線看出這次是以綠色爺爺為參照物做絕對位置的，而且div2同樣脫離了文檔流

至於他太公，一把年紀了，我們就放過他吧- -

先到這把，在下愚見，如有錯誤請及時指出。有空再總結下margin布局和float布局

copyright © Tim demo下載

同時感謝這三篇文章

http://apps.hi.baidu.com/share/detail/2284634

http://hi.baidu.com/lileding/item/ae30c31e43c09bfe86ad4e30

http://wenku.baidu.com/view/477959140b4e767f5acfce32.html

（轉）css絕對位置、相對定位和文檔流的那些事