How to Position Two Divs Above Each Over

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>

how to position two divs above each over

All statements regarding absolute positioning are correct. People failed to mention, however, that you need position: relative on the parent container.

#container {  position: relative;}#num1,#num2 {  position: absolute;  left: 50px;}

<div id='container'>  <div id='num1'>1</div>  <div id='num2'>2</div></div>

placing a div next two divs above each other

This works:

    #div3{height:100px;width:100px;border: solid 1px #000;
display:inline-block;}
    #div1{height:30px;width:100px;border: solid 1px #000;}
#div2{height:20px;width:100px;border: solid 1px #000; position: absolute; bottom: 0}
#div1_2{display:inline-block;vertical-align:top; position: relative; height: 100px;}

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>

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.

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

Div over 2 other divs?

Here is how you would use absolute positioning to place the third div. There are a few ways to do this, I think this one will be the easiest to understand.

#container{  width: 400px;  height: 200px;  background: blue;  position: relative;}div.green{  background: green;  display: block;  height: 100px;}div.red{  background: red;  display: block;  height: 100px;}div.box{  width: 100px;  height: 100px;  background: yellow;  position: absolute;  right: 20px;  top: 50%;  transform: translateY(-50%);

<div id="container">
  <div class="green"></div>  <div class="red"></div>  <div class="box"></div>
</div>