詳解CSS position屬性
詳解CSS position屬性
閱讀目錄
- 基礎知識
- 絕對定位
- 固定定位
- 相對定位
- 應用舉例
- 總結
position是CSS中非常重要的一個屬性,通過position屬性,我們可以讓元素相對於其正常位置,父元素或者瀏覽器窗口進行偏移。postion也是初學者容易搞不清楚狀況的一個屬性,本文將從最基礎的知識講起,談談關於positon屬性的一些理論與應用。
回到頂部基礎知識
postion屬性我們成為定位,它有4個不同類型的定位,這些類型會影響元素的生成方式,下面我們詳細說明position屬性。
position四種類型
(1)static
static是position屬性的默認值,默認情況下,塊級元素和行內元素按照各自的特性進行顯示
(2)relative
relative翻譯成中文稱相對定位,設置了這個屬性後,元素會根據top,left,bottom,right進行偏移,關鍵點是它原本的空間仍然保留。我們看下面例子:
HTML代碼
1 <div class="relative"> 2 </div> 3 <div></div>
CSS代碼
1 div { background: #0094ff; width: 250px; height: 100px; } 2 .relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; }
效果圖
relative效果在這個例子中,div.relative相對定位,並且left設置為20px,left設置為50px,其相對於父元素進行偏移,並且原本的空間也占據著,下面的元素並不會頂替上去。
(3)absolute
元素設置成absolute後會脫離文檔流,並且不占有原本的空間,後面的元素會頂替上去,而且不論元素是行內元素還是塊級元素,都會生成一個塊級框,也就是例如行內元素span設置了absolute後就可以設置height和width屬性了。看下面例子:
HTML代碼
1 <span class="absolute"> 2 </span> 3 <div></div>
CSS代碼
1 div { background: #0094ff; width: 250px; height: 100px; } 2 .absolute { background: #ff6a00; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; }
效果圖
absolute效果如圖所示,span標簽被設置成絕對定位,就可以設置height和width屬性,而且不占有原本的空間,後面的div元素會頂替上去。
(4)fixed
fixed的表現方式類似於absolute,但是相比於absolute相對於不確定的父元素進行偏移,fixed就是相對於瀏覽器窗口進行偏移
包含塊
在詳解CSS float屬性中我們提到包含塊這個概念。對於position屬性也有包含塊這個屬性,它要分幾種情況來討論:
1.根元素的包含塊,根元素一般是html元素,有些瀏覽器會使用body作為根元素,大多數瀏覽器,初始包含塊是一個視窗大小的矩形
2.非根元素的包含塊,如果該元素的position是relative或static,它的包含塊是最近的塊級框,表的單元格或行內塊的內容邊界
我們舉例進行說明,
HTML代碼
1 <div> 2 我是父級元素的內容 3 <div class="relative"> 4 相對定位元素 5 </div> 6 </div>
CSS代碼
div { background: #0094ff; width: 250px; height: 100px; } .relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; }
效果圖
包含塊這是相對定位元素的包含塊,為最近的塊級框,表的單元格或行內塊的內容邊界,相對定位元素相對於其包含塊進行偏移,我們可以簡單理解為相對於其原來的位置進行偏移。
3.非根元素的包含塊,如果該元素的position是absolute,則包含塊為最近的position不是static的祖先元素。
簡單來說,它的包含塊會從父級元素一直向上查找,找到第一個position不是static的元素為止。
偏移屬性
前面的例子中已經涉及到偏移屬性,它指的是元素相對於其包含塊的偏移,我們稱其為偏移屬性,分別是top,bottom,left,right,依次代表上下左右。他們的值可以是具體的數值,也可以是百分比。如果是百分比,top和bottom是相對於包含塊高度的百分比,left和right是相對於寬度的百分比。它們也可以設置負值,即有可能將元素移動到包含塊的外邊。
回到頂部絕對定位
接下來我們了解一下絕對定位的詳細細節。
基本的絕對定位
一個元素被設置為絕對定位時,會脫離文檔流,然後相對其包含塊進行偏移。
一般來說,我們會將一個元素設置為relative來作為absolute元素的包含塊,我們看看下面的例子:
HTML代碼
1 <div class="absolute"> 2 相對於初始包含塊定位 3 </div> 4 <br /> 5 <br /> 6 <br /> 7 <br /> 8 <br /> 9 <br /> 10 <div class="relative"> 11 <div class="absolute"> 12 相對於最近relative祖先元素定位 13 </div> 14 </div>
CSS代碼
1 div { background: #0094ff; width: 250px; height: 100px; } 2 .relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; } 3 .absolute { background: #988c8c; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; }
效果圖
基本的絕對定位
如圖所示,有兩個絕對定位元素,第一個元素沒有position不是static的祖先元素,所以它的包含塊是body,根據body進行偏移,
第二個絕對定位元素設置了一個relative的父元素,它根據父元素進行偏移。
絕對定位的重疊問題
元素設置成絕對定位後會脫離文檔流,並且失去占用的空間,而且如果偏移的位置接近,會造成重疊問題。看看下面的例子:
HTML代碼
1 <div class="relative"> 2 <div class="absolute"> 3 相對於最近relative祖先元素定位1 4 </div> 5 <div class="absolute light"> 6 相對於最近relative祖先元素定位2 7 </div> 8 </div>
CSS代碼
1 div { background: #0094ff; width: 250px; height: 100px; } 2 .relative { background: #ff6a00; position: relative; width: 500px; height: 300px; top: 20px; left: 50px; } 3 .absolute { background: #988c8c; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; } 4 .light { background: #f3d6d6; top: 70px; left: 80px; }
效果圖
絕對定位的重疊問題我們可以看到,第二個絕對定位元素蓋住了第一個元素,那怎麽讓第一個元素蓋住第二個元素呢,這就要用到z-index屬性,這個屬性表示元素的疊加順序,默認情況下,z-index為0,數值越高的元素層級越高,就可以蓋住低於其層級的元素,我們設置第一個原色的z-index為10,結果如下
如果兩個元素的層級相同,則越後面的元素會覆蓋前面的元素,默認情況下,第二個元素就會蓋住第一個元素。
固定定位
fixed定位很簡單,類似與absoulte,但是它的包含塊就是瀏覽器窗口,相對來說簡單很多。常見的應用比如固定導航,回到頂部。在這裏不再贅述,大家可以查找相關資料。
回到頂部相對定位
relative定位的元素進行偏移後,不會脫離文檔流,還有占據原本的空間。除此之外,我們還要註意一個細節:如果元素設置了margin為負值之後發生重疊的情況下,相對定位的元素會覆蓋普通元素。我們看看下面的例子:
HTML代碼
1 <div class="no-relative"> 2 未相對定位的元素 3 </div> 4 <div class="minus-margin"> 5 負margin元素 6 </div>
CSS代碼
1 div { background: #0094ff; width: 250px; height: 100px; } 2 .no-relative { background: #ff6a00; width: 200px; height: 100px; } 3 .relative { background: #ff6a00; width: 200px; height: 100px; position: relative; } 4 .minus-margin { margin-top: -30px; }
效果圖
未相對定位時沒有覆蓋
默認情況下,兩個元素都是正常的元素,設置了負的margin屬性後,後面的元素會覆蓋前面的元素,我們修改第一個元素的class為relative,可以看到效果如下:
添加了相對定位後,第一個元素就會覆蓋其他正常的元素了。
relative屬性最經常的一個應用應該是作為absolute元素的包含塊了,為了限制absolute元素的偏移位置,常常設置其父元素為relative來作為其包含塊。
回到頂部應用舉例
position的應用非常頻繁,下面我來說說常見的一些場景:
產品標簽
在電商網站中,我們常常可以看到產品的左上角或右上角有一些比如“新品”,“促銷”,“熱賣”等標簽,比如下圖:
這個是怎麽實現的呢,我們來模擬一下:
HTML代碼:
1 <div class="product"> 2 我是產品 3 <span class="hot"> 4 熱賣 5 </span> 6 </div>
CSS代碼:
1 .product { width: 150px; height: 150px; background: #0094ff; position: relative; } 2 .hot { position: absolute; right: 10px; top: 10px; width: 40px; height: 20px; background: #ff6a00; text-align: center; }
效果如下:
產品標簽
如圖所示,右上角有一個標簽。原理很簡單,就是設置父元素相對定位,標簽元素絕對定位,然後相對於父元素偏移到右上角。
自動完成框
自動完成框是一個非常常見的應用,其生成的下拉菜單也是用到了position屬性。我們先看看下面的效果:
這是一個很簡單常見的下來自動完成框,我們來看看它的HTML和CSS代碼:
HTML代碼
1 <input class="search-box" type="text" placeholder="請輸入關鍵字" value="position" /> 2 <ul style="left:58px;"> 3 <li>position屬性</li> 4 <li>position應用</li> 5 <li>position是什麽</li> 6 <li>position翻譯</li> 7 </ul>
CSS代碼
1 .search-box { border: 1px solid #ccc; width: 200px; padding: 5px; height: 24px; margin-left: 50px; } 2 ul, li { list-style-type: none; } 3 ul { border: 1px solid #ccc; width: 210px; position: absolute; } 4 li { padding: 5px; }
這個原理也很簡單,通過設置下拉菜單為絕對定位,然後設置其left屬性與輸入框對齊。
當然position的應用還有很多,比如布局,比如fixed可以用來做固定導航菜單,網頁右下角的固定菜單等,有興趣的同學可以自行查找相關資料進行學習。
回到頂部總結
position屬性是一個容易讓初學者迷惑的屬性,尤其是absolute和relative的應用。要用好它們,首先要從absolute和relative的基本特性開始了解,理解了他們的特性之後應用起來就得心應手了,了解基本原理後,多多寫幾個例子從實踐中去體會它們的特性,慢慢的就會熟悉了。
原文地址:http://luopq.com/2015/11/15/css-position/
詳解CSS position屬性