html - 仅溢出某些元素

Question

我有一个带有 overflow: hidden 的 div，里面有相当大的元素集合，我想在溢出它们的父元素时隐藏它们。但是我也有两个自定义下拉菜单，我想在打开时重叠并退出 div。有没有办法避免特定元素的溢出隐藏效果？这是一个 example .假设我希望蓝色方 block 越过红色边框并溢出它的父边界，但希望绿色方 block 保持切断和隐藏状态。

Answer 1

您可以使用伪元素重叠/隐藏某些元素，请参阅此示例。

html

<div class="red">
  <div class="blue"></div>
  <div class="green"></div>
</div>

CSS

* {
  box-sizing: border-box;
}

.red {
  position: relative;
  border: 3px solid red;
  width: 300px;
  height: 300px;
}

.red:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 70px;
    background: rgb(243, 245, 246);
    bottom: -70px;
    z-index: -1;
}

.blue,.green {
  position: absolute;
  width: 70px;
  height: 70px;
  bottom: -40px;
}
.blue {
  background-color: blue;
  z-index: 1;
  left: 40px;
}
.green {
  background-color: green;
  z-index: -1;
  right: 40px; 
}

这里是 fiddle