How to place a div under div with absolute elements in-CodePudding

I have a div containing images that have to be layered over each other. (Just using one image in example but it would normal be differing images.

I'm using position:absolute to place them over each other like so

<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;
}

I need the id=underneath div to be placed underneath the container. But currently it shows on top of it. Is there anyway of forcing it below? I can use margin-top to force it down but this isn't optimal as the image will resize depending on browser viewport size (using bootstrap img-fluid, which i believe sets height and width auto. So i don't have a one size fits all margin-top as it will vary depending on viewport.

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

CodePudding user response：

Using grid works for me.

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

CodePudding user response：

position: absolute takes those elements out of the document flow, meaning the subsequent element (.container) will appear at the ( vertically) same position, as if the absolutely positioned elements would have a height of zero. To avoid that, apply a height value to the .container

To force all images to be the height you define for the container, you can apply height: 100%; width: auto; to the images to fill the height of the container and adjust the width according to the image proportions, and add position: relative to the .container div to define it as the position and height reference for its children, i.e. the images:

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