關於div+css布局的定位?

01-15

詳細介紹下相對定位和定位

CSS中定位分五種：static,relative,absolute,fixed；

與定位配合使用的是top,right,bottom,left, 分別指容器相對於上右下做的距離，可以設置為固定值或者百分比。

設置定位後，z-index會生效，設置容器的z軸上的位置

相對定位和絕對定位的應用

圖一

1.相對定位：容器會脫離文檔流，但是容器原本所佔有的空間不會消失！相對於自身原本的位置進行偏移

見上圖一，是沒有設置定位的三個div;

下圖是將div2設置了相對定位，top:20px; left:20px; div2相對於以前的位置分別向上和向左偏移了20px,而且把div3的部分遮住了，div3也沒有將原本div2的空間佔用，我們可以用z-index來這是上下層次，見第2張圖

圖二

圖三.

2. 絕對定位：容器會脫離文檔流，但是容器原本所佔有的空間會消失！相對於父容器中第一個設置了定位屬性的容器進行偏移

圖四。

見圖四，是三個沒有設置定位的div。div1的margin:20px 0 0 20px;

見下圖五，div2設置了絕對定位，top:10px;left:10px; 可以看到，div2相對於body向左和向上偏移了10px；這是為什麼呢，因為body 的定位為fixed，這個是寫死的，不要問為什麼！

圖五。

我們再來進行一個測試，先將div2進行相對定位,left:10px;top:10px; 再將div3進行絕對定位，left:30px;top:30px; 發現div2是相對於它原本的位置進行定位的，而div3此時是相對於div2進行了定位，（見圖七）

所以驗證了相對定位是相對於自己原本的位置進行偏移，絕對定位是相對於父容器中第一個設置了定位屬性的容器進行偏移

然後，比較圖六和圖七，請仔細看下找到「div2-2」的問題，初始是在div3容器的下面顯示的，div3進行絕對定位後，見圖七："div2-2"顯示的位置在"div2-1"的後面，div3容器的上面了，所以驗證了容器絕對定位後，容器原本所佔有的空間會消失！

圖六。

圖七。

如果還是不明白容器原本所佔據空間會消失！這個現象的話，請看下圖八,我對div3設置了相對定位，再看看div2-2的位置，明白了吧？

圖八。