CODEWITHSUNDEEP
htmlcssimagecss-positionlayer
LegionOfBrad
LegionOfBrad

Reputation: 141

How to place a div under div with absolute elements in

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

Upvotes: 0

Views: 66

Answers (3)

Sakthi Bala K.S
Sakthi Bala K.S

Reputation: 175

You can use a separate wrapper div and wrap your container in it that way the wrapper is following the standard flow of the page.

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

Upvotes: 0

Johannes
Johannes

Reputation: 67778

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>

Upvotes: 0

JorgeZ
JorgeZ

Reputation: 208

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>

Upvotes: 1

Related Questions