首頁  >  文章  >  web前端  >  為什麼不溢出:隱藏使用絕對定位的內部 DIV 工作,除非外部 DIV 相對定位?

為什麼不溢出:隱藏使用絕對定位的內部 DIV 工作,除非外部 DIV 相對定位?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-11-27 18:23:15793瀏覽

Why Doesn't Overflow:hidden Work with Absolutely Positioned Inner DIVs Unless the Outer DIV is Positioned Relatively?

溢出隱藏和絕對定位

在嵌套DIV 的場景中,外部DIV 存在溢出:隱藏屬性和內部DIV絕對定位,內部DIV 可能不遵守外部DIV 的溢出約束。當外部 DIV 沒有絕對定位時,就會發生這種情況。將外部 DIV 更改為絕對位置可能會破壞整體佈局。

要解決此問題,同時保持內部 DIV 在表格單元格內的所需位置,可以採用另一種方​​法:

  1. 將外部 DIV 設定為position:relative。這將為內部 DIV 建立一個新的座標系。
  2. 將內部 DIV 的位置改為position:absolute。這會將內部 DIV 相對於其最近定位的祖先進行定位,在本例中為外部 DIV。

範例:

#first {
    width: 200px;
    height: 200px;
    background-color: green;
    position: relative;
}

#second {
    width: 50px;
    height: 400px;
    background-color: red;
    position: absolute;
    left: 0px;
    top: 0px;
}
<table>

透過此調整,外部DIV 的溢出:隱藏屬性現在將正確約束內部DIV,防止其內容內部超出外部DIV 的邊界DIV。此外,此解決方案允許內部 DIV 按預期生長到表格單元之外。

以上是為什麼不溢出:隱藏使用絕對定位的內部 DIV 工作,除非外部 DIV 相對定位?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn