CSS之 relative 特性

本文轉載於:猿2048網站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. 如使用，則儘可能縮小控制區域，減小到只包含要限制的內部元素