使 HTML 元素在另一个元素下时不可见

Question

假设我有两个 div，一大一小。当小div与大div重叠时，我希望隐藏小div，但仅隐藏div下方的部分。因此，如果小 div 的一半位于大 div 下方，我只想隐藏一半。示例：

<div id="largeDiv" style="position:absolute; width: 20%; height: 20%;"></div>
<div id="smallDiv" style="position:absolute; width: 5%; height: 5%;"></div>

我尝试过在CSS中使用z-index和显示属性，但没有成功。

Answer 1

只有 largeDiv 需要正值

z-index

。最重要的是，您需要在 largeDiv 上添加不透明背景（默认背景除外）：

#largeDiv,
#smallDiv {
  min-height: 50vh;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: white;
}

#largeDiv {
  background-color: blue;
  z-index: 1;
  top: 0.5em;
}

#smallDiv {
  top: 30vh;
  background-color: green;
}

<div id="largeDiv" style="position:absolute; width: 20%; height: 20%;"></div>
<div id="smallDiv" style="position:absolute; width: 5%; height: 5%;"></div>