聊聊本身的特性:
# left、right、top、bottom 定位都是相對於自身位置定位
當left、right 同時存在left 生效
##當top、bottom 同時存在top 生效
無侵入,保留原始位置,不會影響其他元素的佈局
可運用於《自訂拖曳》
#了解relative 與absoulte 的關係:
relative 元素會限制內部absoulte 元素的left、right、top、bottom 定位
relative 元素會限制內部absoulte 元素的z-index 層級
#relative 元素會限制內部absoulte 元素可受overflow 元素設定
#了解relative 與fixed 的關係 :
relative 元素會限制內部fixed 元素的z-index 層級
了解relative 與z-index 的關係 :
設置relative 的元素,會提高層疊上下文
當z-index 為auto 的relative元素,則不會限制內部absoulte 元素的層級
當z-index 為數值時, 則會建立層疊上下文,從而比較的是兩個relative元素的層疊數值大小, 而不是內部元素的比較。
使用注意力:
盡量避免使用relative 屬性
如使用,則盡量縮小控制區域,減少到只包含要限制的內部元素
以上是關於CSS中relative 特性的詳細內容。更多資訊請關注PHP中文網其他相關文章!