如何在具有绝对元素的div下放置一个div答案

【问题标题】：How to place a div under div with absolute elements in如何在具有绝对元素的div下放置一个div
【发布时间】：2022-01-10 12:04:54
【问题描述】：

我有一个 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 强制它向下，但这不是最佳选择，因为图像会根据浏览器视口大小调整大小（使用引导 img-fluid，我相信它会自动设置高度和宽度。所以我没有一个size 适合所有 margin-top，因为它会因视口而异。

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

【问题讨论】：

标签： html css image css-position layer

【解决方案1】：

使用网格对我有用。

.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>

【讨论】：

【解决方案2】：

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>

【讨论】：

【解决方案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;
}

【讨论】：