CSS定位技術詳解

一、基礎概念

1、CSS定位是一種通過調整元素在網頁中的位置和大小來控制頁面布局的技術。

2、常用的CSS定位技術包括相對定位、絕對定位、固定定位和粘附定位。

3、CSS定位涉及到的屬性包括position、top、bottom、left、right、z-index等。

二、相對定位

1、相對定位是相對於元素在正常文檔流中的位置進行定位。

2、相對定位不會使其他元素的位置發生改變。

3、相對定位的元素可以使用top、bottom、left、right屬性調整位置。

<div style="position:relative;top:20px;left:50px;">
  <p>這是相對定位的元素</p>
</div>

三、絕對定位

1、絕對定位是相對於最近的已定位祖先元素進行定位，如果沒有已定位祖先元素，則相對於body元素。

2、絕對定位會使其他元素的位置發生改變。

3、絕對定位的元素可以使用top、bottom、left、right屬性調整位置。

<div style="position:relative;">
  <div style="position:absolute;top:20px;left:50px;">
    <p>這是絕對定位的元素</p>
  </div>
</div>

四、固定定位

1、固定定位是相對於視口進行定位。

2、固定定位的元素不會隨着頁面滾動而移動。

3、固定定位的元素可以使用top、bottom、left、right屬性調整位置。

<div style="position:fixed;top:20px;left:50px;">
  <p>這是固定定位的元素</p>
</div>

五、粘附定位

1、粘附定位是一種新型的定位方式，可以讓元素在距離某個特定位置一定範圍內保持不動，超出該範圍後跟隨滾動。

2、粘附定位的元素必須設置position為sticky。

3、粘附定位的元素可以使用top、bottom、left、right屬性調整位置，同時還可以設置距離某個特定元素一定的距離。

<div style="position:sticky;top:20px;left:50px;float:right;">
  <p>這是粘附定位的元素</p>
</div>

六、z-index 屬性

1、z-index 屬性確定元素的堆疊順序。

2、具有較高 z-index 值的元素會覆蓋具有較低 z-index 值的元素。

3、z-index 的默認值是 auto，意味着元素的堆疊順序將基於元素在正常文檔流中的出現順序。

<div style="position:relative;z-index:1;">
  <p>這是z-index值為1的元素</p>
</div>
<div style="position:relative;z-index:2;">
  <p>這是z-index值為2的元素</p>
</div>