CSS圖層遮罩層是指當一個元素包含在另一個元素中時，被包含的元素可以覆蓋住包含它的元素，從而形成一種遮罩效果。通過使用CSS中position、z-index屬性的組合，我們可以很輕松地實現這種遮罩效果。

下面是一個例子：

<div class="container">
<div class="overlay"></div>
<div class="content">
<p>這是被遮罩的內容</p>
</div>
</div>
.container {
position: relative;
width: 400px;
height: 300px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 1;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}

在上面的例子中，我們創建了一個容器元素，內部包含一個遮罩層和一個內容層。遮罩層使用絕對定位方式定位在容器元素的左上角，并且覆蓋了整個容器元素。同時，設置了遮罩層的背景顏色為半透明黑色，即rgba(0, 0, 0, 0.6)。然后，我們設置了內容層的位置在容器元素的中央，并且設置了一個比遮罩層更高的z-index值。這樣，內容層就可以覆蓋住遮罩層，并且在遮罩層的背景下更加突出。

需要注意的是，只有絕對定位的元素才可以使用z-index屬性。如果兩個元素都使用了絕對定位，且它們的z-index值相同，那么它們的顯示層級是由它們在HTML文檔中的位置決定的。也就是說，后面出現的元素會覆蓋住前面出現的元素。