CSS z-index 屬性
更多“自己嘗試”的例子見下文。
定義和用法
z-index 屬性指定元素的堆疊順序。
堆疊順序較高的元素始終位於堆疊順序較低的元素的前面。
注意： z-index 僅對已定位的元素（position: absolute, position: relative, position: fixed, 或 position: sticky）以及 flex 項（display:flex 元素的直接子元素）有效。
注意： 如果兩個已定位的元素重疊，且未指定 z-index，則 HTML 程式碼中最後定位的元素將顯示在最上面。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| z-index | 1.0 | 4.0 | 3.0 | 1.0 | 4.0 |
CSS 語法
z-index: auto|數字|initial|inherit;
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| auto | 設定為與其父元素相同的堆疊順序。這是預設值 | 演示 ❯ |
| 數字 | 設定元素的堆疊順序。允許使用負數 | 演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
為不同的框設定 z-index
.wrapper {
position: relative;
}
.box1 {
position: relative;
z-index: 1;
border: solid;
height: 100px;
margin: 50px;
}
.box2 {
position: absolute;
z-index: 2;
background: pink;
width: 20%;
left: 65%;
top: -25px;
height: 120px;
opacity: 0.9;
}
.box3 {
position: absolute;
z-index: 3;
background: cyan;
width: 70%;
left: 40px;
top: 60px;
}
自己動手試一試 »
相關頁面
CSS 教程：CSS 定位
HTML DOM 參考： zIndex 屬性
