如何在不刪除絕對/相對定位的情況下垂直堆疊絕對定位的元素？-css教學-PHP中文網

首頁

web前端

css教學

如何在不刪除絕對/相對定位的情況下垂直堆疊絕對定位的元素？

Susan Sarandon

Dec 25, 2024 am 07:54 AM

How to Stack Absolutely Positioned Elements Vertically Without Removing Absolute/Relative Positioning?

定位困境：使用絕對定位重疊元素

在網頁設計中，使用絕對定位對於創建特定的元素佈局非常有用。然而，它也可能帶來挑戰，特別是在嘗試垂直堆疊元素時。

考慮以下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
staticstaticstaticstaticstatic
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