---
tags: CSS
---

# CSS｜z-index｜元素堆疊順序｜基本觀念

<center><img src="https://i.imgur.com/rn4cqoX.png"></center>

### ｜判斷層級問題
1. 被覆蓋的層(欲置頂的層)的 position 是否也為 relative 或者 absolute。
2. 若 **1** 成立，則判斷此層的 z-index 是否比誤覆蓋的 z-index 數值大。
3. 若 **2** 成立，則判斷此層的父級元素是否比誤覆蓋層的 z-index 數值大。
3. 若 **3** 成立，則判斷此層的父級元素是否比誤覆蓋層的父級層的 z-index 數值大。

---

### ｜z-index 使用前提

必須使用到 position，設定你的元素位置，若沒有設定則元素會在網頁上呈現為一般的區塊，沒辦法重疊起來。

position 可設定為 static、absolute、relative、fixed 以及 top、right、bottom、left，其他的目前在 z-index 沒有效果(即其 position 屬性值不是 static)。

---
### ｜另外注意
最常見的 z-index 不起作用的原因除了未設定 position 之外，也與包在最外層的 div 標籤設定有關。

如以下範例：
<img src="https://i.imgur.com/2tu7cc9.png" width="75%" height="auto">
橘色 z-index:100 依然被 z-index:10 藍綠色 覆蓋，
因為 z-index 順序判定是先被兩個物件最外層的紅色數值給影響
（2 > 1，所以z-index:2的紅色不管裏面藍綠色設定值多少，都會在 z-index:1 的紅色之上）

&nbsp;
&nbsp;

**此時可用以下兩種方式：**

* 最外層的紅色皆不設定 z-index
<img src="https://i.imgur.com/dqsFk0O.png" width="75%" height="auto">

* 把 z-index:1 的數值改為 2 以上，比另一個紅色的 z-index 大（例如：3）
<img src="https://i.imgur.com/ApcUPJW.png" width="75%" height="auto">

&nbsp;
&nbsp;

---
參考資料：
* [當你發現z-index沒有用的時候，就用這個保證有效四步驟！](https://blog.weibbb.com/2016/06/z-index.html?showComment=1605669040721#c8642833112831849454)
* [z-index - CSS（层叠样式表）| MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/z-index)
* [CSS z-index 語法使用範例](https://paper.dropbox.com/doc/Flex--BUwJ5rm0KLGFyDm0Gc8JqVtzAg-tvaJQP4EtjCMAK0pgnpGt)

---
###### tags: `CSS`