相對定位是乙個非常容易掌握的概念。如果對乙個元素進行相對定位，它將出現在它所在的位置上。然後，可以通過設定垂直或水平位置，讓這個元素「相對於」它的起點進行移動。
如果將 top 設定為 20px，那麼框將在原位置頂部下面 20 畫素的地方。如果 left 設定為 30 畫素，那麼會在元素左邊建立 30 畫素的空間，也就是將元素向右移動。
#box_relative如下圖所示：
那麼我們就會想了怎麼讓框三把框二覆蓋呢，很自然的想到把框3的z-index設為乙個優先順序高的值如100，但是這樣並不能得到我們想要的結果，必須把框2的z-index設為優先順序低的如-1，
我猜想是因為框2已經脫離了文件流，所以只設定
框3的z-index
絕對定位使元素的位置與文件流無關，因此不佔據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。
普通流中其它元素的布局就像絕對定位的元素不存在一樣：
#box_relative如下圖所示：
絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。
對於定位的主要問題是要記住每種定位的意義。所以，現在讓我們複習一下學過的知識吧：相對定位是「相對於」元素在文件中的初始位置，而絕對定位是「相對於」最近的已定位祖先元素，如果不存在已定位的祖先元素，那麼「相對於」最初的包含塊。
注釋：根據使用者**的不同，最初的包含塊可能是畫布或 html 元素。
因為絕對定位的框與文件流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設定
z-index 屬性
來控制這些框的堆放次序。
同樣的道路如果想讓框1，3在2之上的話也需要在框2上設定z-index，而且如果只在框1，3上設定的話無效。
請看下圖，當把框 1 向右浮動時，它脫離文件流並且向右移動，直到它的右邊緣碰到包含框的右邊緣：
如果把所有三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前乙個浮動框。
在 css 中，我們通過 float 屬性實現元素的浮動。
。浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。
因此，建立浮動框可以使文字圍繞影象：
。clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應該挨著浮動框。
為了實現這種效果，在被清理的元素的上外邊距上新增足夠的空間，使元素的頂邊緣垂直下降到浮動框下面：
這種情況下，出現了乙個問題。因為浮動元素脫離了文件流，所以包圍和文字的 div 不佔據空間。
如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個元素中的某個地方應用 clear：
這樣可以實現我們希望的效果，但是需要新增多餘的**。常常有元素可以應用 clear，但是有時候不得不為了進行布局而新增無意義的標記。
不過我們還有另一種辦法，那就是對容器 div 進行浮動：
.news這樣會得到我們希望的效果。不幸的是，下乙個元素會受到這個浮動元素的影響。為了解決這個問題，有些人選擇對布局中的所有東西進行浮動，然後使用適當的有意義的元素（常常是站點的頁尾）對這些浮動進行清理。這有助於減少或消除不必要的標記。.news img
.news p
事實上，w3school 站點上的所有頁面都採用了這種技術，如果您開啟我們使用 css 檔案，您會看到我們對頁尾的 div 進行了清理，而頁尾上面的三個 div 都向左浮動。
CSS布局 2 絕對定位和相對定位
absolute css 中的寫法是 position absolute top right bottom left 下面簡稱trbl 進行定位，在沒有設定trbl，預設依據父級的做標原始點為原始點。如果設定trbl並 且父級沒有設定position屬性，那麼當前的absolute則以瀏覽器左上角為...
CSS 相對定位和絕對定位
1.position relative 如果對乙個元素進行相對定位，首先它將出現在它所在的位置上。然後通過設定垂直或水平位置，讓這個元素 相對於 它的原始起點進行移動。再一點，相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其他框 2.position absolut...
css 絕對定位和相對定位
絕對定位指的是通過規定html元素在水平和垂直方向上的位置來固定元素，基於絕對定位的元素不佔據空間。絕對定位的位置宣告是相對於已定位的並且包含關係最近的祖先元素。如果當前需要被定位的元素沒有已定位的祖先元素做參考值，則相對於整個網頁。例項1 該段落是相對於頁面定位，距離頁面的頂部100畫素，距離左邊...