Stacking DIVs on top of each other?

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开发者_StackOverflow 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>
</div>

To add to Dave's answer:

div { position: relative; }
div div { position: absolute; top: 0; left: 0; }

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

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

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 :)

style="position:absolute"

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

https://codepen.io/anon/pen/EXxKzP

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

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.

The answer that provides position:absolute is now outdated.

In currently supported browsers, it is much easier to achieve the same using CSS grid. This will ensure that the elements are still part of the page layout (issue produced with position:absolute.

This is a blog post explaining how to achieve this: https://zelig880.com/how-to-stack-two-elements-on-top-of-each-other-without-using-position-absolute

And this is a codepen with a live example:https://codepen.io/zelig880/pen/oNdZWNa

Quick code:

.container_row{
  display: grid;
}

.layer1, .layer2{
  grid-column: 1;
  grid-row: 1;
}

.layer1{
  color: blue;
  background: red;
  animation-direction: reverse;
}

.layer2{
  color: white;
  background: blue;
}
.layer1, .layer2 {
  animation-name: fade;
  animation-duration: 10s;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="container_row">
    <div class="layer1">
        I am the layer behind
    </div>
    <div class="layer2">
        I am actually on top
    </div>
</div>
<div class="container_row">
   Yuppi! This line is positioned successfully! This would not have been the case with position:absolute
</div>

If you have issues related to affecting other elements' positions you can do it like this.

<div class="container">
  <div>Div 1</div>
  <div>Div 2 on top of div 1</div>
  <div>Div 3 on top of div 1 and 2</div>
</div>

<style type="text/css">
  .container {
    /* to align absolute children to relative parent */
    position: relative;
  }
  .container > div {
    /* no need for z-index, the lower div will be higher 
       use z-index if you want a specific div to be on top of others */
    position: absolute;
  }
</style>

David Antoon