關于div+css布局的定位?
時間：2024-02-10 07:20:01 | 來源：網站運營
時間：2024-02-10 07:20:01 來源：網站運營
關于div+css布局的定位?：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; 發(fā)現div2是相對于它原本的位置進行定位的，而div3此時是相對于div2進行了定位，（見圖七） 所以驗證了相對定位是相對于自己原本的位置進行偏移，絕對定位是相對于父容器中第一個設置了定位屬性的容器進行偏移
然后，比較圖六和圖七，請仔細看下找到 “div2-2”的問題，初始是在div3容器的下面顯示的，div3進行絕對定位后，見圖七："div2-2"顯示的位置在"div2-1"的后面，div3容器的上面了，所以驗證了容器絕對定位后，容器原本所占有的空間會消失！圖六。 圖七 。
如果還是不明白 容器原本所占據空間會消失！ 這個現象的話，請看下圖八,我對div3設置了相對定位，再看看div2-2的位置，明白了吧？
圖八。
在線咨詢
