CSS中有一種效果叫做遮罩，可以將某個(gè)元素或區(qū)域覆蓋住并半透明化，這種效果非常常用。但是，有時(shí)候我們希望遮罩下面的內(nèi)容不會(huì)因?yàn)檎谡值某霈F(xiàn)而出現(xiàn)任何變化，該怎么做呢？

實(shí)現(xiàn)這種效果其實(shí)很簡(jiǎn)單，只需要給遮罩的父元素添加一個(gè)相對(duì)定位，并設(shè)置z-index為1，然后將要遮罩的元素添加絕對(duì)定位，并將其z-index設(shè)置為2即可。這樣，遮罩就會(huì)蓋在下面的內(nèi)容上，而下面的內(nèi)容不會(huì)發(fā)生任何變化。

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

通過(guò)這種方法，我們可以輕松地實(shí)現(xiàn)不影響遮罩下面內(nèi)容的效果。當(dāng)然，這里還有一個(gè)小技巧，就是可以使用pointer-events屬性來(lái)控制遮罩下面的內(nèi)容是否可交互。如果將pointer-events設(shè)置為none，那么鼠標(biāo)事件將會(huì)穿過(guò)遮罩，作用在遮罩下面的元素上。

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

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