頁面布局中元素定位的幾種方式

文章目錄

• • 元素定位（position）
  • • 1、相對定位
    • 2、絕對定位
  • 總結

元素定位（position）

定位是一種更為進階的布局方法。通過定位可以使得元素擺放在頁面中任意位置。

position屬性有五個值：

• static ------ 預設值
• relative---- 相對定位
• absolute --絕對定位
• fixed -------固定定位
• sticky ------粘滞定位

偏移量（offset），有四個屬性：top、bottom、left、right。

top值越大，定位元素向下移動的越多；bottom越大，定位元素向上移動的越多。left = - bottom

left值越大，定位元素向右移動的越多；right越大，定位元素向左移動的越多。left = - right

1、相對定位

當元素的position屬性值設定為relative時開啟相對定位。

特點：

1. 不設定偏移量（offset）時，元素不會發生變化。
2. 相對定位是相對于元素原本的位置進行定位。
3. 相對定位會提升元素的層級。
4. 相對定位不會使元素脫離文檔流，不會改變元素性質（行内元素、塊元素）。

相對定位

粘滞定位

當元素的position屬性值設定為sticky時開啟粘滞定位。粘滞定位是一種相對定位，不同的是可以使元素在某個位置固定不動。

2、絕對定位

當元素的position屬性值設定為absolute時開啟絕對定位。

特點：

1. 開啟絕對定位時，如果不設定偏移量，元素的位置不會改變。
2. 元素會從文檔流中脫離。
3. 會改變元素性質—行内元素變為塊，塊的内容會被内容撐開。
4. 絕對定位會使元素提升一個層級。

5. 絕對定位元素是相對于其包含塊進行定位。

   包含塊：

   - 正常情況下，包含塊是離目前元素最近的祖先塊元素。

   - 絕對定位情況下，離它最近的開啟定位的祖先塊元素（html為根元素、初始包含塊）。

固定定位

當元素的position屬性值設定為fixed時開啟固定定位。固定定位是一種絕對定位，不同的是永遠參照浏覽器視口進行定位。固定定位的元素不會随滾動條移動。

總結

一般工作當中，使用較多的是相對定位和絕對定位，另外兩種相容性有局限。