CSS 中的遮挡关系是指在网页中有多个元素叠加在一起，覆盖部分显示一种在上层的元素遮盖了下层元素的关系。

/* 遮挡关系的产生 */
.layer1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 20px;
left: 20px;
z-index: 2;
}
.layer2{
width: 150px;
height: 150px;
background-color: blue;
position: absolute;
top: 50px;
left: 50px;
z-index: 1;
}

在这个例子中，两个元素有相同的位置坐标，但 z-index 不同，所以红色的 .layer1 元素会遮盖在蓝色的 .layer2 元素之上。

z-index 是用来定义元素在竖向层次上的前后顺序的，值越大就越靠上面。同时，z-index 只对 position 属性为 relative、absolute、fixed 的元素有效。

需要注意的是，在使用遮挡关系时，应该尽量让遮盖的元素具有明显的视觉提示，否则会影响用户的阅读体验。同时，在使用遮挡关系时，应该注意多个元素的 z-index 不要出现交叉，否则会出现不可预料的情况。