2016-04-21 88 views
0

我已經有了一個與overflow: hidden的div,並且裏面有一個相當大的元素集合,我想在被父元素溢出時被隱藏。不過,我也有兩個自定義下拉菜單,我想重疊並在打開時退出div。無論如何要避免特定元素的溢出隱藏效果?這是一個example。假設我想讓藍色方塊越過紅色邊框,並溢出它的父邊界,但希望綠色方塊保持切斷和隱藏狀態。只溢出某些元素

+0

這個問題在之前這裏問:http://stackoverflow.com/questions/5367060/setting-overflowhidden-only對於某些元素 - 有一個閱讀,那裏的答案仍然相關。這裏是他們使用的小提琴:http://jsfiddle.net/sEX3n/4/ – Frits

+0

實際上並不完全。我確實需要html結構保持幾乎相同,或者至少保留不應該隱藏在「overflow:hidden」元素中的元素。 – GMchris

回答

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

+0

謝謝,但將「overflow:hidden」元素移出「藍色」並不是我能做的事情。它需要在那裏。我希望會有一些涉及z-索引或什麼的技巧/破解。 – GMchris

+0

https://jsfiddle.net/akzu4sc0/4/這個怎麼樣?但它不合適的解決方案 –

+0

這很聰明:D但是,是的,三個盒子的例子是我的實際網頁看起來像過度簡化。 – GMchris