只溢出某些元素

Question

我已经有了一个与overflow: hidden的div，并且里面有一个相当大的元素集合，我想在被父元素溢出时被隐藏。不过，我也有两个自定义下拉菜单，我想重叠并在打开时退出div。无论如何要避免特定元素的溢出隐藏效果？这是一个example。假设我想让蓝色方块越过红色边框，并溢出它的父边界，但希望绿色方块保持切断和隐藏状态。

Answer 1

YOu可以重叠/隐藏某些具有伪元素的元素，请参阅此示例。

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