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的位置，明白了吧？圖八。
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的位置，明白了吧？圖八。