1. 絕對定位，absolute
如果想為元素設定層模型中的絕對定位，需要設定position:absolute(表示絕對定位)，這條語句的作用將元素從文件流中拖出來，然後使用left、right、top、bottom屬性相對於其最接近的乙個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器視窗。
如下面**可以實現div元素相對於瀏覽器視窗向右移動100px，向下移動50px。
2. 相對定位，relative
如果想為元素設定層模型中的相對定位，需要設定position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文件流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成乙個元素(並且元素像層一樣浮動了起來)，然後相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
如下**實現相對於以前位置向下移動50px，向右移動100px;
什麼叫做「偏移前的位置保留不動」呢？
偏移前的位置還保留不動，覆蓋不了前面的div沒有偏移前的位置效果圖：
從效果圖中可以明顯的看出，雖然div元素相對於以前的位置產生了偏移，但是div元素以前的位置還是保留著，所以後面的span元素是顯示在了div元素以前位置的後面。
3. relative與absolute組合使用
小夥伴們學習了12-6小節的絕對定位的方法：使用position:absolute可以實現被設定元素相對於瀏覽器（body）設定定位以後，大家有沒有想過可不可以相對於其它元素進行定位呢？答案是肯定的，當然可以。使用position:relative來幫忙，但是必須遵守下面規範：
1、參照定位的元素必須是相對定位元素的前輩元素：
相對參照元素進行定位從上面**可以看出box1是box2的父元素（父元素當然也是前輩元素了）。
2、參照定位的元素必須加入position:relative;
#box13、定位元素加入position:absolute，便可以使用top、bottom、left、right來進行偏移定位了。
#box2這樣box2就可以相對于父元素box1定位了（這裡注意參照物就可以不是瀏覽器了，而可以自由設定了）。
總結：使用絕對定位，可以實現橫向多列布局及較為複雜的定位，比如帶有遮罩層效果的提示框、固定層效果、全屏廣告等。
CSS 絕對定位與相對定位
前幾天遇到了上班的第乙個難題，專案想要實現這樣的效果 實際效果比視覺圖上下多了兩截。但是，聰明如我怎麼可以在我的第乙個頁面上屈服呢！於是在光明正大地看了其他 類似效果的原始碼之後，我也get到了這個技能！原來這裡是用到障眼法，分別畫出兩個細成一條線的div，分別為.border first和.bor...
css相對定位與絕對定位
逆戰班通常情況下，我們用css定位來解決容器疊加排列的 問題，而用浮動解決左右排列的問題。position屬性的值主要有static，relative，absolute，fixed和sticky這幾種，position屬性的預設值為static，也就是沒有定位，元素在正常的文件流中，這時候給元素加偏...
CSS布局 2 絕對定位和相對定位
absolute css 中的寫法是 position absolute top right bottom left 下面簡稱trbl 進行定位，在沒有設定trbl，預設依據父級的做標原始點為原始點。如果設定trbl並 且父級沒有設定position屬性，那麼當前的absolute則以瀏覽器左上角為...