Stacking DIVs on top of each other?
CssHtmlStackCss FloatCss Problem Overview
Is it possible to stack up multiple DIVs like:
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
So that all those inner DIVs have the same X and Y position? By default they all go below each other increasing the Y position by the height of the last previous DIV.
I have a feeling some sort of float or display or other trick could bite?
EDIT: The parent DIV has position relative, so, using position absolute does not seem to work.
Css Solutions
Solution 1 - Css
Position the outer div however you want, then position the inner divs using absolute. They'll all stack up.
.inner {
position: absolute;
}
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
</div>
Solution 2 - Css
To add to Dave's answer:
div { position: relative; }
div div { position: absolute; top: 0; left: 0; }
Solution 3 - Css
You can now use CSS Grid to fix this.
<div class="outer">
<div class="top"> </div>
<div class="below"> </div>
</div>
And the css for this:
.outer {
display: grid;
grid-template: 1fr / 1fr;
place-items: center;
}
.outer > * {
grid-column: 1 / 1;
grid-row: 1 / 1;
}
.outer .below {
z-index: 2;
}
.outer .top {
z-index: 1;
}
Solution 4 - Css
If you mean by literally putting one on the top of the other, one on the top (Same X, Y positions, but different Z position), try using the z-index
CSS attribute. This should work (untested)
<div>
<div style='z-index: 1'>1</div>
<div style='z-index: 2'>2</div>
<div style='z-index: 3'>3</div>
<div style='z-index: 4'>4</div>
</div>
This should show 4 on the top of 3, 3 on the top of 2, and so on. The higher the z-index is, the higher the element is positioned on the z-axis. I hope this helped you :)
Solution 5 - Css
I'd prefer CSS grid for a better page layout (absolute
divs can be overridden by other divs in the page.)
.container {
width: 300px;
height: 300px;
margin: 0 auto;
background-color: yellow;
/* important part */
display: grid;
place-items: center;
grid-template-areas: "inner-div";
}
.inner {
height: 100px;
width: 100px;
/* important part */
grid-area: inner-div;
}
<div class="container">
<div class="inner" style="background-color: white;"></div>
<div class="inner" style="background-color: red;"></div>
<div class="inner" style="background-color: green;"></div>
<div class="inner" style="background-color: blue;"></div>
<div class="inner" style="background-color: purple;"></div>
</div>
If you hide the purple div with CSS, you'll see the blue div is at the top.
Here's a working link
Solution 6 - Css
style="position:absolute"
Solution 7 - Css
I positioned the divs slightly offset, so that you can see it at work.
HTML
<div class="outer">
<div class="bot">BOT</div>
<div class="top">TOP</div>
</div>
CSS
.outer {
position: relative;
margin-top: 20px;
}
.top {
position: absolute;
margin-top: -10px;
background-color: green;
}
.bot {
position: absolute;
background-color: yellow;
}
Solution 8 - Css
I had the same requirement which i have tried in below fiddle.
#container1 {
background-color:red;
position:absolute;
left:0;
top:0;
height:230px;
width:300px;
z-index:2;
}
#container2 {
background-color:blue;
position:absolute;
left:0;
top:0;
height:300px;
width:300px;
z-index:1;
}
#container {
position : relative;
height:350px;
width:350px;
background-color:yellow;
}
Solution 9 - Css
I know that this post is a little old but I had the same problem and tried to fix it several hours. Finally I found the solution:
if we have 2 boxes positioned absolue
<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px;'></div>
<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px;'></div>
we do expect that there will be one box on the screen. To do that we must set margin-bottom equal to -height, so doing like this:
<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px; margin-bottom: -200px;'></div>
<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px; margin-bottom: -200px;'></div>
works fine for me.