Stacking Divs on Top of Each Other

Stacking DIVs on top of each other?

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>

CSS - how to stack two div elements on top of one another that resize together?

To stack a div on top of another you need to use position: absolute. However, you can then put them both in a containing div with position: relative.
To size relative to window size use vh and vw.

.container {
  background-color: green;
  position: relative;
  left: 10vw;
  top: 25vh;
  height: 50vh;
  width: 80vw;
}

.box-one {
  background-color: red;
  height: 80%;
  width: 80%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
}

.box-two {
  background-color: blue;
  height: 80%;
  width: 80%;
  position: absolute;
  left: 0px;
  top: 0px;
}

<div class="container">
  <div class="box-one"></div>
  <div class="box-two"></div>
</div>

Stacking DIVS on Top Of Each Other In Ascending Order

If you want to stack them on top of each other like overlapping layers, then z-index will let you choose which order they should stack in.

.blue{
  background:blue;
  z-index: 4;
}
.green{
  background:green;
  z-index: 3;
}
.yellow{
  background:yellow;
  z-index: 2;
}
.red{
  background:red;
  z-index: 1;
}

Codepen showing it in action here.

Stacking divs on top of each other

z-index works for positioned absolute or relative elements, it's simple just add position relative and z-index for h1 tag,

h1 { font-size: 50px; border-bottom: 15px solid #e8cd54; position:relative; z-index:1 }

Updated jsfiddle

How to position these divs on top of each other

No. This is possible with something like paper, but z-index is more like a stack of plates. It would be like stacking plates so that the bottom one is also on top of the top one. Not going to happen.

The only way you could try to "cheat" a solution is to copy the bottom element (yellow), raise it all the way to the top, and somehow mask it so that it looks like it's both under red and above green. I'm not sure what you're trying to do in your actual application, but I would recommend just achieving the effect with an image.

But there is no way to make just these three divs work in the way you describe.

---

Related Topics