オーバーフローの外側に子を表示する：非表示の親

100

CSSではoverflow:hidden、フローティング子の高さで拡張できるように、が親コンテナに設定されています。

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

PREVIOUS兄弟がフローティング要素である場合、実際にはそれと並置されて表示されます。つまり、兄弟がその場合、float:leftコンテナfloat:none overflow:hiddenは兄弟の右側に表示され、改行は表示されません。通常のフローに浮かんでいるかのように表示されます。前の兄弟がfloat:rightその場合、コンテナは兄弟の左側に表示されます。このコンテナのサイズを変更すると、フローティング要素の中央に正確に表示されます。あなたが以前の2人の兄弟、1があれば言ってやるがfloat:left他にfloat:right、コンテナは2わたってるしき中央に表示されます。

だからここに問題があります...

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

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

だから質問：

overflow:hiddenレイアウトを維持するためにコンテナが必要です...

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

または

overflow:visibleコンテナの外側で親に対して子を絶対に配置できるようにするにはどうすればよいですか...まだ兄弟のfloat-like-layout-flowを保持しますか？

— マークナダル
ソース

86

を使用し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;

— Frexuz
ソース

うーん！賢い、私はちょうど今それを実験しています。私が現在得ているのは、生成されたコンテンツが正しく動作し、レイアウトのフローに保持されていることですが、親はそれを無視し、フローティング要素の上にレイヤーします。ただし、これは非常に良いアイデアであり、正しく動作させることができるかどうかを確認し、投票に戻るために、さらに試してみます。ありがとうございました：）。

— マークナダル2012年

@ user1671639あなたの例は、実際にはクリアフィックスには適用されません。他に何かが必要なので、問題について質問を投稿することをお勧めします。

— Frexuz 2013

これはまったく同じようには機能しませんoverflow:hidden。親divにclearfixを適用しても、すべての子コンポーネントを親と同じ高さに「含める」ことはできません。

— Khom Nazid

11

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

— 反射
ソース

18

しかし、親DIVの境界（オーバーフロー：非表示）を超えた場合、親DIVはそれをマスクしませんか？

— marknadal 2012

9

親がposition：relativeを持っていない限り、そうではありません。次に、子は最初に配置された（静的ではない）祖先要素を基準にして配置され、通常の（親の）domフローから外されます。

— Pim Schaaf 2013

親にposition：relativeがあり、それを必要としない場合は、position：unsetにすることができます。

— yeahlad

確かに、それが、を持っている親の外側のposition: fixed何かに対して絶対的に配置されている場合、それは表示されます。ただし、コードの変更に対してより堅牢にするために、親に対して相対的に配置する必要がある（必要な）ことがよくあります。その場合、これらのソリューションは代替手段ではありません。visibility: hidden

— ArneHugo

10

これは古い質問ですが、自分で遭遇しました。

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

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

— トーマスデイビス
ソース

これは、表示するためにhtmlファイルに投稿するだけのくだらない例です。<code> <div style = "background：＃ff00ff; overlay：hidden; width：500px; height：500px; position：relative;"> <div style = "background：＃ff0000; position：fixed; top：10px; left ：10px; "> asd <div style =" background：＃00ffff; width：200px; overlay：visible; position：absolute; visible：visible; clear：both; height：1000px; top：100px; left：10px; "> a </ div> </ div> </ div> </ code>

— Thomas Davis

4

回答していただきありがとうございますが、固定位置では要素がビューポートに対して自動的に配置されるため、これは機能しません。つまり、親と一緒に移動しません。実際、スクロールページがある場合は、スクロールしても10px、10pxのままになります。

— marknadal 2011年

「親divがposition：relativeである必要がある場合、子を表示するために私が見つけた唯一の方法はposition：fixedでした。」それをありがとう。親にオーバーフローがあったとしても、オーバーフローする必要のあるポップオーバーヘルプバブルがありました：スクロール。最終的に、相対的な内部を持つ絶対的なdivと、固定されたコンテンツ領域ができました。

— JackMorrissey 2015

ありがとう、それは私のために働いた。相対的な位置を持つ親がありましたが、その位置はを使用して設定されていたため、これが必要でしたleft。margin-left代わりに使用すると同じ効果が得られるため、相対位置を使用する必要がなくなりました。

— フェリペカストロ

1

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

— ウォルフ
ソース