沒有爲每個元素溢出

有沒有辦法使overflow:hidden不適用於每個孩子？沒有爲每個元素溢出

小例子：

<div class="parent" style="overflow:hidden; position: relative;"> 
    ... 
    <div class="hidden" style="top: -50px"> AA </div> <!-- overflowed and hidden --> 
    <div class="visible" style="bottom: -50px"> BB </div> <!-- overflowed and visible --> 
    ... 
</div>

我需要有1元，這將是哪怕是溢出可見。

來源

2016-08-15 Lucfia

我首先要問，爲什麼你需要在這種情況下在父母的溢出？ –

你想讓孩子們溢出父母嗎？目前還不清楚你在問什麼。 – TylerH

如果你的可見元素可以position: absolute它會忽略其母公司的overflow: hidden。這是一個片段示例。

請注意，您的父母應該被包含在另一個div中，使用position: relative才能正常工作。

.visible{ 
 
    position: absolute; 
 
} 
 
.parent{ 
 
    overflow: hidden; 
 
} 
 
.relative{ 
 
    position: relative; 
 
} 
 

 
/* presentational styles */ 
 
.parent{ 
 
    border: 1px solid blue; 
 
} 
 
.hidden{ 
 
    background: yellow; 
 
} 
 
.visible{ 
 
    background: red; 
 
} 
 
.parent, 
 
.hidden, 
 
.visible{ 
 
    padding: 2rem; 
 
}

<div class="relative"> 
 
    <div class="parent"> 
 
    <div class="hidden" style="top: -50px"> AA </div> <!-- overflowed and hidden --> 
 
    <div class="visible" style="bottom: -50px"> BB </div> <!-- overflowed and visible --> 
 
    </div> 
 
</div>

來源

2016-08-15 13:52:37

工作正常，謝謝 – Lucfia

CSS：

.hidden-flow { 
    overflow: hidden; 
}

和HTML：

<div class="parent hidden-flow" style=" position: relative;"> 
    ... 
    <div class="hidden hidden-flow" style="top: -50px"> AA </div> <!-- overflowed and hidden --> 
    <div class="visible" style="bottom: -50px"> BB </div> <!-- overflowed and visible --> 
    ... 
</div>

來源

2016-08-15 13:44:33

我相信這將是很難不增加更多的元素。我能想到的唯一方法是添加另一個與父級相同位置的容器。但是這會打破你的元素流動，除非你使用絕對定位。這將是沿着這些路線的東西：

<style> 
.parent { 
    position: relative; 
    width: 50px; 
    border: 1px solid blue; 
} 

.subparent{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    overflow:hidden; 
} 

.parent > div { 
    position: absolute; 
} 

.visible { 
} 

.hidden { 

} 
</style> 

<div class="parent"> 
    ... 
    <div class="subparent"> 
    <div class="hidden" style="top: -50px"> AAAAAAAAAAAAAAAAAAA </div> <!-- overflowed and hidden --> 

    </div> 

    <div class="visible" style="bottom: -50px"> BBBBBBBBBBBBBBBB </div> <!-- overflowed and visible --> 
    ... 
</div>

應該被隱藏，如果他們溢出應與類subparent在div元素。

來源

2016-08-15 14:03:27

沒有爲每個元素溢出

回答

相關問題