CSS中有一種效果叫做遮罩，可以將某個元素或區域覆蓋住并半透明化，這種效果非常常用。但是，有時候我們希望遮罩下面的內容不會因為遮罩的出現而出現任何變化，該怎么做呢？

實現這種效果其實很簡單，只需要給遮罩的父元素添加一個相對定位，并設置z-index為1，然后將要遮罩的元素添加絕對定位，并將其z-index設置為2即可。這樣，遮罩就會蓋在下面的內容上，而下面的內容不會發生任何變化。

/* 父元素樣式 */
.parent {
position: relative;
z-index: 1;
}
/* 遮罩樣式 */
.mask {
position: absolute;
z-index: 2;
/* 其他樣式 */
}

通過這種方法，我們可以輕松地實現不影響遮罩下面內容的效果。當然，這里還有一個小技巧，就是可以使用pointer-events屬性來控制遮罩下面的內容是否可交互。如果將pointer-events設置為none，那么鼠標事件將會穿過遮罩，作用在遮罩下面的元素上。

/* 遮罩樣式 */
.mask {
position: absolute;
z-index: 2;
pointer-events: none;
/* 其他樣式 */
}

如果不需要交互，這個屬性可以省略。但是，在一些需要將鼠標事件傳遞給下面元素的場景下，這個屬性可以派上用場。