如何隐藏绝对定位元素下方被覆盖的元素部分？（含class示例）

这个问题其实很常见，要实现把class a中被绝对定位的class b覆盖的部分完全隐藏，核心就是让a只显示未被b遮挡的区域，我给你几个实用的方法，你可以根据自己的场景选择：

方法1：用clip-path精准裁剪（适合固定尺寸/位置的场景） #

如果class b的位置和尺寸是固定的，直接用clip-path把class a中被覆盖的区域“挖掉”就行。

举个实际代码例子：

/* class a的样式 */
.a {
  position: relative;
  background: #ccc;
  width: 300px;
  height: 200px;
  /* 用polygon定义显示区域，把b覆盖的部分排除在外 */
  clip-path: polygon(
    0 0, 100% 0, 100% 20px, 
    30px 20px, 30px 100px, 
    130px 100px, 130px 20px, 
    100% 20px, 100% 100%, 0 100%
  );
}

/* class b的绝对定位样式 */
.b {
  position: absolute;
  top: 20px;
  left: 30px;
  width: 100px;
  height: 80px;
  background: #ff4444;
}

这里的clip-path: polygon()是通过坐标点勾勒出class a需要显示的区域——把b覆盖的那块（水平30px到130px，垂直20px到100px）直接排除，这样a被盖住的部分就彻底看不到了。

方法2：用mask属性实现动态适配（适合尺寸/位置变化的场景） #

如果class b的位置或尺寸是动态变化的，写死坐标的clip-path就不太灵活了，这时候可以用CSS的mask属性结合线性渐变来实现：

.a {
  position: relative;
  background: #ccc;
  width: 300px;
  height: 200px;
  /* mask的原理是：黑色区域显示内容，透明区域隐藏内容 */
  mask: 
    /* 顶部未被覆盖的区域 */
    linear-gradient(black, black) 0 0 / 100% 20px no-repeat,
    /* 左侧未被覆盖的区域 */
    linear-gradient(black, black) 0 20px / 30px 80px no-repeat,
    /* 右侧未被覆盖的区域 */
    linear-gradient(black, black) 130px 20px / calc(100% - 130px) 80px no-repeat,
    /* 底部未被覆盖的区域 */
    linear-gradient(black, black) 0 100px / 100% calc(100% - 100px) no-repeat;
  /* 兼容webkit内核浏览器 */
  -webkit-mask: 
    linear-gradient(black, black) 0 0 / 100% 20px no-repeat,
    linear-gradient(black, black) 0 20px / 30px 80px no-repeat,
    linear-gradient(black, black) 130px 20px / calc(100% - 130px) 80px no-repeat,
    linear-gradient(black, black) 0 100px / 100% calc(100% - 100px) no-repeat;
}

.b {
  position: absolute;
  top: 20px;
  left: 30px;
  width: 100px;
  height: 80px;
  background: #ff4444;
}

这个方法的好处是，只要调整mask里的坐标和尺寸，就能适配b的位置变化，比clip-path更灵活。

方法3：父容器overflow:hidden+反向定位（仅适合边缘覆盖场景） #

如果class b是覆盖在class a的边缘位置，还可以用父容器的overflow:hidden配合反向定位来隐藏被覆盖部分，不过这个方法局限性比较大，只适合简单场景：

.parent {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 200px;
}

.a {
  position: absolute;
  top: 0;
  left: 0;
  background: #ccc;
  width: 300px;
  height: 200px;
  /* 把被b覆盖的部分移出父容器，被overflow:hidden隐藏 */
  margin-top: 20px;
  margin-left: 30px;
}

.b {
  position: absolute;
  top: 20px;
  left: 30px;
  width: 100px;
  height: 80px;
  background: #ff4444;
}

要是b覆盖在a的中间区域，这个方法就不适用了，所以更推荐前两种方案。

内容的提问来源于stack exchange，提问作者Ishan Patel