Question

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

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

溢出只有某些元素

1 个答案: