实现HTML元素被其他元素覆盖时仅隐藏重叠部分

要实现小div被大div覆盖的部分隐藏，z-index和display确实无法满足需求——前者只能控制元素堆叠层级，后者是对整个元素进行显示/隐藏操作，都做不到局部裁剪。下面提供两种实用方法：

方法1：CSS遮罩（静态场景推荐） #

利用SVG定义遮罩区域，让小div只显示大div以外的部分，适合位置固定的场景。

完整代码示例：

<div id="largeDiv" style="position:absolute; width: 20%; height: 20%; background: #ccc;"></div>
<div id="smallDiv" style="position:absolute; width: 5%; height: 5%; background: #f00;
  mask: url(#exclude-large-div);
  -webkit-mask: url(#exclude-large-div);
"></div>

<!-- 隐藏的SVG，用于定义遮罩规则 -->
<svg width="0" height="0">
  <defs>
    <mask id="exclude-large-div">
      <!-- 白色背景：默认显示所有区域 -->
      <rect width="100vw" height="100vh" fill="white" />
      <!-- 黑色矩形：隐藏该区域（对应大div的位置和尺寸） -->
      <rect x="0" y="0" width="20%" height="20%" fill="black" />
    </mask>
  </defs>
</svg>

• 原理：遮罩中白色区域会显示对应元素内容，黑色区域会隐藏内容，通过这种方式排除大div的覆盖区域。
• 注意：如果大div的位置是动态的，需要同步修改SVG中黑色矩形的x/y属性。

方法2：JS动态计算裁剪路径（动态场景推荐） #

如果大div或小div的位置、尺寸会动态变化，用JS计算重叠区域，生成clip-path实现局部裁剪。

完整代码示例：

<div id="largeDiv" style="position:absolute; left:10%; top:10%; width:20%; height:20%; background:#ccc;"></div>
<div id="smallDiv" style="position:absolute; left:15%; top:15%; width:5%; height:5%; background:#f00;"></div>

<script>
function updateSmallDivClip() {
  const largeEl = document.getElementById('largeDiv');
  const smallEl = document.getElementById('smallDiv');
  
  // 获取两个元素的视口坐标和尺寸
  const largeRect = largeEl.getBoundingClientRect();
  const smallRect = smallEl.getBoundingClientRect();
  
  // 计算重叠区域的边界
  const overlapLeft = Math.max(largeRect.left, smallRect.left);
  const overlapTop = Math.max(largeRect.top, smallRect.top);
  const overlapRight = Math.min(largeRect.right, smallRect.right);
  const overlapBottom = Math.min(largeRect.bottom, smallRect.bottom);
  
  // 无重叠时取消裁剪
  if (overlapLeft >= overlapRight || overlapTop >= overlapBottom) {
    smallEl.style.clipPath = 'none';
    return;
  }
  
  // 转换为小div内部的相对百分比坐标
  const relLeft = (overlapLeft - smallRect.left) / smallRect.width * 100;
  const relTop = (overlapTop - smallRect.top) / smallRect.height * 100;
  const relRight = (overlapRight - smallRect.left) / smallRect.width * 100;
  const relBottom = (overlapBottom - smallRect.top) / smallRect.height * 100;
  
  // 生成裁剪路径：保留小div除重叠区外的所有部分
  smallEl.style.clipPath = `polygon(
    0% 0%, 0% 100%, ${relLeft}% 100%, ${relLeft}% ${relTop}%,
    ${relRight}% ${relTop}%, ${relRight}% ${relBottom}%,
    ${relLeft}% ${relBottom}%, ${relLeft}% 100%, 100% 100%, 100% 0%
  )`;
}

// 初始化执行
updateSmallDivClip();
// 窗口大小变化时重新计算（如果有拖动元素的逻辑，也要触发此函数）
window.addEventListener('resize', updateSmallDivClip);
</script>

• 原理：通过getBoundingClientRect()获取元素位置，计算出重叠区域后，用clip-path: polygon()裁剪掉小div的重叠部分。
• 适用场景：元素位置、尺寸会动态改变的交互场景（比如拖动、窗口缩放）。

内容的提问来源于stack exchange，提问作者Eli Sterken