在CSS中，Z-Index（z軸）是一個非常有用的屬性，它控制元素在三維空間中的堆疊順序。通俗來說，如果兩個元素重疊了，那么z-index就能夠確定哪個元素是在最前面的，哪個元素是在最后面的。
在CSS2中，元素堆疊順序是按照它們在HTML文檔中出現(xiàn)的順序來確定的。但是，在CSS3中，我們可以使用z-index屬性來明確告訴瀏覽器如何堆疊元素。z-index是一個整數(shù)值，值越大，元素就越靠近觀察者。如果多個元素具有相同的z-index值，它們的堆疊順序仍然會按照它們在HTML文檔中出現(xiàn)的順序來確定。
在下面的示例中，我們可以看到z-index的效果。首先，我們在HTML文檔中創(chuàng)建了兩個
元素，它們的樣式如下所示：
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
.box {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: #ccc;
border: 2px solid #333;
text-align: center;
line-height: 100px;
}
.box1 {
z-index: 1;
}
.box2 {
z-index: 2;
}其中，我們使用了position屬性將元素定位，使用z-index屬性來控制它們的堆疊順序。在這里，box2元素的z-index值比box1要高，所以它會出現(xiàn)在box1的上面。我們也可以使用負數(shù)來控制元素在后面的堆疊順序中的位置。
總之，使用z-index屬性，我們可以非常方便地控制元素在頁面上的層次，讓頁面變得更加生動和豐富。但是，在使用z-index時一定要注意，不要濫用它，以免造成不必要的困擾。