Search code examples

Stacking DIVs on top of each other?

Is it possible to stack up multiple DIVs like:


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.


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