只溢出某些元素

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