在前端開發中，經常會遇到需要將多個元素進行疊放（疊加）的效果，這時就需要用到CSS中的z-index屬性。

假設我們有兩個div元素，我們想讓它們重疊，可以通過設置它們的z-index屬性來完成。

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>CSS:.box1 {
width: 200px;
height: 200px;
background: red;
position: absolute;
top: 50px;
left: 50px;
z-index: 1;
}
.box2 {
width: 200px;
height: 200px;
background: blue;
position: absolute;
top: 100px;
left: 100px;
z-index: 2;
}

在以上代碼中，我們給box1和box2都設置了position: absolute屬性，并通過top和left屬性來控制它們的位置。但是，如果不設置z-index屬性，它們就會按照代碼中的先后順序疊放，也就是說，box2會在box1的上面。

為了讓box1在box2上面，我們給box1設置了一個z-index值為1，而box2的z-index值為2。這時，box2就會疊放在box1的下面，而box1則會顯示在最上面。

需要注意的是，z-index只對有定位屬性（position: absolute、position: relative 或 position: fixed）的元素有效。

另外，如果兩個元素的z-index相同，那么它們的順序就會按照代碼中的先后順序來疊放。

盡管z-index屬性很簡單，但它在實現頁面中的重疊效果時非常重要。