在css中，所謂絕對定位指的是「相對於」已經定位的祖先元素，如果不存在已經定位的祖先元素，那麼就「相對於」最初的包含快(一般情況下為body);相對定位指的是相對於元素初始位置進行定位。
下面來講述兩者的區別：
(1)相對定位
相對定位比較簡單，如果在某個元素中設定了position屬性為relative,那麼該元素會相對於初始位置進行定位，詳情如下圖所示：
相對定位不會脫離文件流(文件流表示針對窗體而言，自上而下分為多行，從而依左至右排放元素)，即當第二個盒子按照left:30px;top:40px;的設定相對移動之後，原來的位置其實是保持不變，第三個盒子不會占用第二個盒子的原始位置。
(2)絕對定位
絕對定位相對於上述情況，則相較於複雜一點。絕對定位需要找到設定絕對定位的元素的祖先元素，它會根據離其最近的祖先元素進行定位。詳情見下圖所示：
根據上圖可以明顯的看出，當第二個盒子設定為絕對定位之後，該盒子脫離文件流，並且它的原始位置已經被第三個盒子所替代。接著第二個盒子開始查詢它的「參照物」，由於白色盒子的postion屬性為預設值，於是向上層級查詢，橘色盒子position:absolute,在絕對定位中，符合祖先元素的條件(定位設定為非static),因此第二個盒子會以橘色盒子為參照物進行向左和向下移動。
CSS 絕對定位與相對定位
前幾天遇到了上班的第乙個難題，專案想要實現這樣的效果 實際效果比視覺圖上下多了兩截。但是，聰明如我怎麼可以在我的第乙個頁面上屈服呢！於是在光明正大地看了其他 類似效果的原始碼之後，我也get到了這個技能！原來這裡是用到障眼法，分別畫出兩個細成一條線的div，分別為.border first和.bor...
css相對定位與絕對定位
逆戰班通常情況下，我們用css定位來解決容器疊加排列的 問題，而用浮動解決左右排列的問題。position屬性的值主要有static，relative，absolute，fixed和sticky這幾種，position屬性的預設值為static，也就是沒有定位，元素在正常的文件流中，這時候給元素加偏...
CSS相對定位絕對定位
absolute 絕對定位 一共有四個屬性值 top right bottom left position absolute top 20px 絕對定位的參考點就是他的父級。同理，如果父級沒有定位屬性，就查詢他的爺爺級.relative 相對定位相對定位與絕對定位結合使用 通常情況下，在對元素設定絕...