首頁 > web前端 > css教學 > 如何在不刪除絕對/相對定位的情況下垂直堆疊絕對定位的元素?

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

Susan Sarandon
發布: 2024-12-25 07:54:12
原創
693 人瀏覽過

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

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

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

考慮以下CSS 片段:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

body {

  position: relative;

  min-height: 2em;

  width: 100%;

}

 

.container {

  position: absolute;

}

 

.row {

  position: relative;

}

 

.col1,

.col2 {

  position: absolute;

}

登入後複製

以及相應的HTML:

1

2

3

<body>

  <div class="container">

    <div>

登入後複製

透過此設置,目的是讓兩個.row 元素垂直堆疊,而不是彼此重疊目前正在做。如何在不刪除絕對/相對定位屬性的情況下實現這一目標?

了解CSS 定位

要找到解決方案,了解不同類型的CSS 定位非常重要:

  • static
  • staticstatic
  • static
  • staticstaticstaticstaticstatic
  • static
  • staticstaticstatic
  • static
static

staticstatic:元素在文件中正常流動佈局。

相對:元素依上、右、下、左偏移量移動,但保留在文件流中。 絕對

:元素從文檔流中刪除,並相對於其最近的

定位祖先(而不是它們的

已修復

:元素從文檔流中刪除並相對於視口定位,隨頁面滾動。

1

2

3

4

<body>

  <div class="container">

    <div class="inner-container">

      <div>

登入後複製
.row

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

.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
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板