Stacking DIVs on top of each other

Question

Is it possible to stack up multiple DIVs like    lt div gt   lt div gt  lt  div gt   lt div gt  lt  div gt   lt div gt  lt  div gt   lt div gt  lt  div gt   lt  div gt    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

User · Answer

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.

User · Answer

You can now use CSS Grid to fix this    lt div class  outer  gt     lt div class  top  gt   lt  div gt     lt div class  below  gt   lt  div gt   lt  div gt    And the css for this    outer     display  grid    grid-template  1fr   1fr    place-items  center     outer  gt        grid-column  1   1    grid-row  1   1     outer  below     z-index  2     outer  top     z-index  1

User · Answer

Position the outer div however you want  then position the inner divs using absolute   They ll all stack up    x000D   x000D   inner   x000D    position  absolute  x000D    x000D   lt div class  outer  gt  x000D      lt div class  inner  gt 1 lt  div gt  x000D      lt div class  inner  gt 2 lt  div gt  x000D      lt div class  inner  gt 3 lt  div gt  x000D      lt div class  inner  gt 4 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

style  position absolute

User · Answer

To add to Dave s answer   div   position  relative    div div   position  absolute  top  0  left  0

User · Answer

All the answers seem pretty old    I d prefer CSS grid for a better page layout  absolute divs can be overridden by other divs in the page    lt div class  quot container quot  gt     lt div class  quot inner quot  style  quot background-color  white  quot  gt  lt  div gt     lt div class  quot inner quot  style  quot background-color  red  quot  gt  lt  div gt     lt div class  quot inner quot  style  quot background-color  green  quot  gt  lt  div gt     lt div class  quot inner quot  style  quot background-color  blue  quot  gt  lt  div gt     lt div class  quot inner quot  style  quot background-color  purple  quot  gt  lt  div gt     lt div class  quot inner no-display quot  style  quot background-color  black  quot  gt  lt  div gt   lt  div gt    lt style gt   container     width  300px    height  300px    margin  0 auto    background-color  yellow    display  grid    place-items  center    grid-template-areas                     quot inners quot       inner     grid-area  inners    height  100px    width  100px      no-display     display  none     lt  style gt   Here s a working link

User · Answer

I positioned the divs slightly offset  so that you can see it at work  HTML   lt div class  outer  gt     lt div class  bot  gt BOT lt  div gt     lt div class  top  gt TOP lt  div gt   lt  div gt    CSS   outer     position  relative    margin-top  20px      top     position  absolute    margin-top  -10px    background-color  green      bot     position  absolute    background-color  yellow      https   codepen io anon pen EXxKzP

User · Answer

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    lt div gt       lt div style  z-index  1  gt 1 lt  div gt       lt div style  z-index  2  gt 2 lt  div gt       lt div style  z-index  3  gt 3 lt  div gt       lt div style  z-index  4  gt 4 lt  div gt   lt  div gt    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

User · Answer

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      https   plnkr co edit XnlneRFlvo1pB92UXCC6 p preview

[css] Stacking DIVs on top of each other?

Examples related to css

Examples related to html

Examples related to stack

Examples related to css-float