關於CSS中relative 特性

聊聊本身的特性：

1. # left、right、top、bottom 定位都是相對於自身位置定位

2. 當left、right 同時存在left 生效

3. ##當top、bottom 同時存在top 生效

4. 無侵入,保留原始位置，不會影響其他元素的佈局

5. 可運用於《自訂拖曳》

#了解relative 與absoulte 的關係：

1. relative 元素會限制內部absoulte 元素的left、right、top、bottom 定位

2. relative 元素會限制內部absoulte 元素的z-index 層級

3. #relative 元素會限制內部absoulte 元素可受overflow 元素設定

#了解relative 與fixed 的關係 :

1. relative 元素會限制內部fixed 元素的z-index 層級

了解relative 與z-index 的關係 :

1.  設置relative 的元素,會提高層疊上下文

2.  當z-index 為auto 的relative元素,則不會限制內部absoulte 元素的層級

3.  當z-index 為數值時, 則會建立層疊上下文,從而比較的是兩個relative元素的層疊數值大小, 而不是內部元素的比較。

使用注意力：

1.  盡量避免使用relative 屬性

2. 如使用，則盡量縮小控制區域，減少到只包含要限制的內部元素

以上是關於CSS中relative 特性的詳細內容。更多資訊請關注PHP中文網其他相關文章！