絶対位置とオーバーフローを非表示にする


134

2つのDIVがあり、一方はもう一方に埋め込まれています。外側のDIVが絶対配置されていない場合、絶対配置されている内側のDIVは、外側DIVの非表示のオーバーフローに従いません()。

外側のDIVを絶対位置に設定せずに、内側のDIVが外側のDIVのオーバーフローを非表示にする可能性はありますか?また、テーブルTD()から「成長」する必要があるため、内部DIVの相対位置はオプションではありません。

他のオプションはありますか?

回答:


282

外側<div>position: relative内側、内側<div>をにしposition: absoluteます。それはあなたのために働くはずです。


5
ありがとうございます。私はいつもposition:relativeがデフォルトだと思っていました。staticがデフォルトであることを知りました。私はシャンカースの回答を受け入れます。どちらの回答も同等であり、シャンカーンにはさらにポイントが必要です;-)
Zardoz

7
いくつかの説明やドキュメントがすばらしい追加になるでしょう。
showdev

25

何についてのposition: relative外側のdivのために?内側のものを隠す例では。また、上または左を指定しないため、レイアウト内で移動しません。


9

絶対配置の要素は、実際にはrelative親、または最も近くにある相対的な親に関して配置されます。したがって、の要素は、要素のoverflow: hiddenrelativeabsolute配置する必要があります:

<div class="relative-parent">
  <div class="hiding-parent">
    <div class="child"></div>
  </div>
</div>

.relative-parent {
  position:relative;
}
.hiding-parent {
  overflow:hidden;
}
.child {
  position:absolute; 
}

-3

あなたはdivこのようにsを作るだけです:

<div style="width:100px; height: 100px; border:1px solid; overflow:hidden; ">
    <br/>
    <div style="position:inherit; width: 200px; height:200px; background:yellow;">
        <br/>
        <div style="position:absolute; width: 500px; height:50px; background:Pink; z-index: 99;">
            <br/>
        </div>
    </div>
</div>

このコードがあなたのお役に立てば幸いです:)

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.