關於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. 如使用，則盡量縮小控制地區，減少到只包含要限制的內部元素