CSS是前端開發的重要組成部分，它不僅能夠美化頁面，還可以影響元素的層疊關系。元素的層疊順序是指當兩個或多個元素發生重疊時，哪個元素會顯示在前面，哪個會顯示在后面。下面我們就來看一下影響層疊關系的一些CSS屬性。 1. z-index z-index屬性用于控制元素的層疊順序。數值越大，則元素越靠前顯示。當兩個元素重疊時，z-index值大的元素會顯示在前面。需要注意的是，z-index只對定位元素（position: relative/absolute/fixed）有效。 例如，在以下代碼中，我們通過z-index屬性將紅色方塊放到綠色方塊的上面顯示。

<style>
.container {
position: relative;
height: 200px;
background-color: yellow;
}
.box1 {
position: absolute;
width: 100px;
height: 100px;
background-color: green;
top: 50px;
left: 50px;
z-index: 1;
}
.box2 {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
top: 70px;
left: 70px;
z-index: 2;
}
</style>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>

2. position position屬性也會影響元素的層疊順序。通常來說，定位元素會顯示在普通元素的前面。因此，為了控制元素的層疊順序，我們可以給元素添加定位屬性。 例如，在以下代碼中，我們將第二個元素設為定位元素，并設置其z-index值，使其顯示在前面。

<style>
.box1 {
height: 100px;
width: 100px;
background-color: green;
}
.box2 {
height: 100px;
width: 100px;
background-color: red;
position: relative;
z-index: 1;
}
</style>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>

3. opacity opacity屬性也會影響元素的層疊關系。當元素的透明度小于1時，它會被認為是比較“輕盈”的，排在后面。 例如，在以下代碼中，我們將第一個元素的透明度設置為0.5，使其顯示在后面。

<style>
.box1 {
height: 100px;
width: 100px;
background-color: green;
opacity: 0.5;
}
.box2 {
height: 100px;
width: 100px;
background-color: red;
}
</style>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>

以上三個屬性都能夠影響元素的層疊順序，開發者可以根據實際情況選擇相應屬性，來實現頁面的層疊效果。