在製作網頁的過程中，難免要使用到絕對定位，絕對定位是將乙個視窗直接定位到乙個座標上，使用起來很方便，但同時，很多人在使用的時候，也產生了另外乙個 問題，那就是不好控制，明明父塊元素已經移動了，使用了絕對定位的子塊卻不跟著移動，這到底是怎麼回事呢？
首先說明一下絕對定位的乙個特性，那就是：使用了絕對定位的元素都已經「漂」起來了，由於它已經飄出了父塊，所以，它不再受父塊的控制。
且看下面的乙個例子:
test absolute
執行結果如下：
不論你如何改變父塊（圖中紅，灰部分）的位置，綠色子塊都不會改變自己的位置。那麼到底如何讓綠色子塊能夠隨著父塊的位置改變而改變呢，換句話說，如何讓使用了絕對定位的子塊與父塊保持乙個固定的相對位置
呢？其實很簡單，只需要在你需要保持相對位置的父塊新增一條css**「position:relative;
」即可，比如在灰色的middle中新增position:relative;，則綠色子塊就會相對灰色父塊保持乙個相對位置，不論如何改變父塊的位置，綠色子塊都會與相距灰色灰左邊100px，頂部20px。
如果在灰色塊中不新增position:relative;而把此**新增到紅色的outer中，則綠色子塊會類似上述一樣，不再聽命於灰色塊，而與紅色塊保持乙個相對位置。
如果紅色塊與灰色塊都新增了position:relative，那麼綠色子塊會相對於離它最近的灰色塊保持乙個相對不變的位置。
補充說明一點：相對定位是相對於本容器當前的位置進行偏移。
CSS之絕對定位的位置以及子元素在父容器的居中顯示
元素開啟了絕對定位 水平布局 left margin left border left padding left width padding right border right margin right right 包含塊的寬度 此時規則和之前一樣,只是多了left和right這兩個值 當發生過度...
CSS 絕對定位與相對定位
前幾天遇到了上班的第乙個難題，專案想要實現這樣的效果 實際效果比視覺圖上下多了兩截。但是，聰明如我怎麼可以在我的第乙個頁面上屈服呢！於是在光明正大地看了其他 類似效果的原始碼之後，我也get到了這個技能！原來這裡是用到障眼法，分別畫出兩個細成一條線的div，分別為.border first和.bor...
css相對定位與絕對定位
逆戰班通常情況下，我們用css定位來解決容器疊加排列的 問題，而用浮動解決左右排列的問題。position屬性的值主要有static，relative，absolute，fixed和sticky這幾種，position屬性的預設值為static，也就是沒有定位，元素在正常的文件流中，這時候給元素加偏...