如何在具有絕對元素的div下放置一個div

我有一個 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

uj5u.com熱心網友回復：

使用網格對我有用。

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

uj5u.com熱心網友回復：

position: absolute將這些元素從檔案流中取出，這意味著后續元素 ( .container) 將出現在 ( 垂直 ) 相同的位置，就好像絕對定位的元素的高度為零。為避免這種情況，height請將值應用于.container

要強制所有影像為您為容器定義的高度，您可以應用height: 100%; width: auto;到影像填充容器的高度并根據影像比例調整寬度，并添加position: relative到.containerdiv 以將其定義為位置和高度其孩子的參考，即影像：

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

uj5u.com熱心網友回復：

您可以使用單獨的包裝器 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;
}

標籤：

上一篇：ASP.NetMVC-按鈕如何訪問url查詢字串引數？

下一篇：尋找一個torch.imshow()'like'命令