z-index是CSS中一個非常重要的屬性，它可以控制頁面上元素的層次關係。通過設置元素的z-index值，我們可以將某個元素排在另一個元素的上方或下方，以此形成頁面中元素的層疊效果。本文將從以下幾個方面詳細闡述z-index屬性的使用方法和注意事項。
一、基本用法
z-index屬性的值是一個數字，表示元素的層級，數值越大的元素越靠近頁面的頂層。在設置z-index屬性時，需要注意以下幾點：
1、z-index可以是正值，也可以是負值。
2、z-index只有在position屬性的值為relative、absolute、或fixed時才有用。
3、z-index的默認值是0，如果某個元素沒有設置z-index屬性，則該元素會被放置在其他有z-index屬性的元素下面，但在沒有設置z-index屬性的元素上邊。
下面是一個簡單的例子：
<style>
.box1 {
position: relative;
z-index: 2;
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
position: relative;
z-index: 1;
width: 150px;
height: 150px;
background-color: green;
top: -100px; /* 上移100像素 */
left: 50px;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
上面的例子中，兩個盒子都是relative定位，但box1的z-index值比box2大，所以box1會覆蓋在box2上面。box2的top屬性設置為-100px，讓它上移了100像素，這樣就可以看出box1在上方了。結果如下圖所示：
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/151536.html
微信掃一掃 
支付寶掃一掃 