没有为每个元素溢出

有没有办法使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

没有为每个元素溢出

回答

相关问题