如何将 div 放在 div 下，其中包含绝对元素

Question

我有一个 div 包含必须相互分层的图像。（仅在示例中使用一张图片，但通常会出现不同的图片。

我正在使用 position:absolute 像这样将它们相互重叠

<div class=container>
  <img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png class=childImage>
  <img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png class=childImage>
  <img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png class=childImage>
  <img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png class=childImage>
  <img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png class=childImage>
</div>
<div id=underneath>
  should be underneath
</div>

css:

.container{
  position:relative;
}
.childImage{
  position:absolute;
}

我需要将 id=underneath div 放置在容器下方。但目前它显示在它上面。下面有没有强制它？我可以使用 margin-top 来强制降低它，但这不是最佳的，因为图像会根据浏览器视口大小调整大小（使用 bootstrap img-fluid，我相信它会自动设置高度和宽度。所以我不没有适合所有边距顶部的一种尺寸，因为它会因视口而异。

https://codepen.io/legionaaa/pen/WNZggaW

Answer 1

position: absolute 将这些元素从文档流中取出，这意味着后续元素 (.container) 将出现在（垂直）相同的位置，就好像绝对定位的元素会有一个高度为零。为避免这种情况，请将 height 值应用于 .container

要强制所有图像为您为容器定义的高度，您可以对图像应用 height: 100%; width: auto; 以填充容器的高度并根据图像比例调整宽度，并添加 position: relative 到 .container div 将其定义为其子项的位置和高度参考，即图像：

.container {
  height: 100px;
  position: relative;
}
.container>img {
  position: absolute;
  height: 100%;
  width: auto;
}

<div class=container>
  <img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png class=childImage>
  <img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png class=childImage>
  <img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png class=childImage>
  <img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png class=childImage>
  <img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png class=childImage>
</div>
<div id=underneath>
  should be underneath
</div>

Answer 2

使用网格对我有用。

.container {
  display: grid;
}

.childImage{
  grid-column: 1;
  grid-row: 1;
}

<div class=container>
  <img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png class=childImage>
  <img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png class=childImage>
  <img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png class=childImage>
  <img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png class=childImage>
  <img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png class=childImage>
</div>
<div id=underneath>
  should be underneath
</div>

Answer 3

您可以使用单独的包装器 div 并将您的容器包装在其中，使包装器遵循页面的标准流程。

<div id="wrapper">
 <div id="container">
Content
 </div>
 <div id="childImage">
Image
 </div>
<div>

.container{
  position:relative;
  margin-top:100px;
  top:0;
  width: 720px;
}
.childImage{
  position:absolute;
  left:0;
  top:0;
  width: 720px;
  height:100px;
}

如何将 div 放在 div 下，其中包含绝对元素

How to place a div under div with absolute elements in

html

css

image

css-position

layer