すべての要素でオーバーフローしない

Question

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つの要素を、持っている必要があります。

Answer 1

あなたの目に見える要素は、その親のoverflow: hiddenを無視するposition: absoluteすることができます。ここに抜粋の例があります。

あなたの親が正しく動作するposition: relativeで別のdivの内側に含まれるべき注意してください。

.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>

Answer 2

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> 

Answer 3

私はそれがより多くの要素を追加することなく、困難であろうと信じています。私が考えることができる唯一の方法は、親と同じ位置の別のコンテナを追加することです。しかし、絶対配置を使用しない限り、これによって要素フローが破られます。

<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> 

オーバーフローした場合に非表示にする要素は、サブパレントのクラスでなければなりません。