CSS 中有一個 `z-index` 屬性,用于設置元素的層級關系。
如果兩個或多個元素重疊,它們的還可能互相遮蓋。這個時候,我們可以使用 `z-index` 屬性來設置它們的層級,從而決定它們的顯示順序。
該屬性接受一個整數值作為值,值越大的元素就會被放置在上層。
例如,下面的代碼會將元素 `div1` 放置在上層,覆蓋其他元素:
```
div1
div2
div3
```
如果多個元素的 `z-index` 屬性相等,就按照它們在 DOM 樹中的先后順序來決定它們的層級。
一些值得注意的問題:
- `z-index` 只對定位元素(`position: absolute` 或 `position: relative`)有效;
- 不要隨意將 `z-index` 設置為負數。如果你的 `z-index` 值為負數,那么該元素就會隱藏在其他元素的后面;
- 在使用 `z-index` 時,如果一個元素被另一個元素包含,那么它的 `z-index` 值只能影響包含它的元素,而不會影響其他兄弟元素。
綜上,使用 `z-index` 屬性可以輕松控制網頁元素的層級,實現更加自由、靈活的布局效果。