如何在不刪除絕對/相對定位的情況下垂直堆疊絕對定位的元素？
- Susan Sarandon原創
- 2024-12-25 07:54:12617瀏覽
定位困境：使用絕對定位重疊元素
在網頁設計中，使用絕對定位對於創建特定的元素佈局非常有用。然而，它也可能帶來挑戰，特別是在嘗試垂直堆疊元素時。
考慮以下CSS 片段：
body {
position: relative;
min-height: 2em;
width: 100%;
}
.container {
position: absolute;
}
.row {
position: relative;
}
.col1,
.col2 {
position: absolute;
}
以及相應的HTML：
<body>
<div class="container">
<div>
透過此設置，目的是讓兩個.row 元素垂直堆疊，而不是彼此重疊目前正在做。如何在不刪除絕對/相對定位屬性的情況下實現這一目標？
了解CSS 定位
要找到解決方案，了解不同類型的CSS 定位非常重要:
- static
- staticstatic static
- staticstaticstaticstaticstatic static
- staticstaticstatic static
staticstatic：元素在文件中正常流動佈局。
相對：元素依上、右、下、左偏移量移動，但保留在文件流中。 絕對
：元素從文檔流中刪除，並相對於其最近的定位祖先（而不是它們的
已修復
：元素從文檔流中刪除並相對於視口定位，隨頁面滾動。<body>
<div class="container">
<div class="inner-container">
<div>.row.container {
position: relative;
min-height: 2em;
width: 100%;
}
.inner-container {
position: absolute;
}
.row {
position: relative;
}
.col1,
.col2 {
position: absolute;
} 和 .col元素是絕對定位的。絕對定位。 >一個非正統但有效的解決方案是創建第二個容器元素，將行絕對定位：與通過這種雙重嵌套，.inner-container
現在充當.row 元素最接近的定位祖先
。的垂直堆疊元素。以上是如何在不刪除絕對/相對定位的情況下垂直堆疊絕對定位的元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn