詳解CSS position屬性

時間 2019-11-13

標籤詳解 css position 屬性欄目 CSS 简体版

原文原文鏈接

position是CSS中很是重要的一個屬性，經過position屬性，咱們可讓元素相對於其正常位置，父元素或者瀏覽器窗口進行偏移。postion也是初學者容易搞不清楚情況的一個屬性，本文將從最基礎的知識講起，談談關於positon屬性的一些理論與應用。css

基礎知識

postion屬性咱們成爲定位，它有4個不一樣類型的定位，這些類型會影響元素的生成方式，下面咱們詳細說明position屬性。html

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; }

效果圖post

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代碼spa

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元素會頂替上去。3d

（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; }