CSS中的
元素往往會用來做頁面布局，但有時會出現需要用一個
蓋住另一個
的情況。這時候可以使用CSS中的z-index屬性來控制
的層級顯示。
.box1{
position: relative; /*設置相對定位*/
z-index: 1; /*設置層級為1*/
}
.box2{
position: absolute; /*設置絕對定位*/
top: 0;
left: 0;
z-index: 2; /*設置層級為2*/
}在上面的代碼中，
和
都設置了定位屬性，而
的層級高于
。這樣
就會蓋住
了。
值得注意的是，z-index只有在定位屬性（如position）存在的情況下才起作用。
除了使用z-index屬性，還可以使用opacity屬性來控制
的透明度，并利用偽元素:before或:after來創建一個與要蓋住的
大小相同的透明層，達到蓋住的效果。例如：
.box1{
position: relative;
}
.box1:before{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.5; /*設置透明度*/
}
.box2{
position: absolute;
top: 0;
left: 0;
z-index: 2;
}上面的代碼中，
通過:before偽元素創建了一個透明層，這樣就可以蓋住