web-dev-qa-db-ja.com

overflow：hidden親の外側に子を表示する

CSSでは、overflow:hiddenは親コンテナに設定され、フローティングコンテナの高さで展開できるようにします。

しかし、margin: autoと組み合わせた場合、別の興味深い機能もあります...

前の兄弟が浮動要素である場合、実際にはそれに隣接して表示されます。つまり、兄弟がfloat:leftである場合、float:none overflow:hiddenを持つコンテナは兄弟の右側に表示され、改行はありません。まるで通常のフローに浮いているようです。前の兄弟がfloat:rightの場合、コンテナは兄弟の左側に表示されます。このコンテナのサイズを変更すると、フローティング要素の中央に正確に表示されます。前の兄弟がfloat:leftとfloat:rightの2人の場合、コンテナは2つの中央に表示されます。

問題 ...

子をマスクせずにそのタイプのレイアウトを維持するにはどうすればよいですか？

Web全体をグーグルで検索すると、clear:bothを使用してコンテナを展開する方法がわかりますが、左/右の前の子のセンタリングを維持するための代替ソリューションが見つかりません。コンテナをoverflow:visibleにすると、コンテナはフローティング要素のレイアウトフローを突然無視し、フローティング要素の上に重ねて表示されます。

質問：

レイアウトを保持するには、コンテナoverflow:hiddenが必要です...

子供がマスクされないようにするにはどうすればよいですか？コンテナの外側で、子を親に対して絶対に配置する必要があります。

OR

どうすればoverflow:visibleで、コンテナの外側の親に対して子を絶対的に配置できますか？兄弟フロートのようなレイアウトフローをまだ保持しますか？

cssoverflowcss-floatcenterhidden
79
marknadal

clearfixを使用して、同じ方法で「レイアウト保存」を行うことができますoverflow: hiddenします。

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

追加 class="clearfix"クラスを親に、削除overflow: hidden;

77
Frexuz

投稿された回答のどちらも私にとってはうまくいきませんでした。ただし、子要素のposition: absoluteの設定は機能しました。

11
reflexiv

これは古い質問ですが、自分でそれを見つけました。

前の質問に対して状況に応じて機能するセミソリューションがあります（「オーバーフローで見える子：隠された親」）

親divがposition：relativeである必要がない場合、子スタイルをvisibility：visibleに設定するだけです。

親divがposition：relativeである必要がある場合、子を表示できる唯一の方法はposition：fixedでした。これは幸運にも私の状況ではうまくいきましたが、他ではうまくいかないと思います。

これは、表示するHTMLファイルに投稿するだけの簡単な例です。

<div style="background: #ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;">
    <div style="background: #ff0000;position: fixed; top: 10px; left: 10px;">asd
        <div style="background: #00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear:both; height: 1000px; top: 100px; left: 10px;"> a</div>
    </div>
</div>
9
Thomas Davis

その他の場合、clearfixでこれが解決されない場合は、非浮動兄弟にマージンを追加します。これは、浮動兄弟の幅と同じです。

1
Walf