Placing Two Divs on Top of Each Other Without Using Position:Absolute

.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 position two elements on top of each other, without specifying a height?

First of all, you really should be including the position on absolutely positioned elements or you will come across odd and confusing behavior; you probably want to add top: 0; left: 0 to the CSS for both of your absolutely positioned elements. You'll also want to have position: relative on .container_row if you want the absolutely positioned elements to be positioned with respect to their parent rather than the document's body:

If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed' ...

Your problem is that position: absolute removes elements from the normal flow:

It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants. However, the contents of an absolutely positioned element do not flow around any other boxes.

This means that absolutely positioned elements have no effect whatsoever on their parent element's size and your first <div class="container_row"> will have a height of zero.

So you can't do what you're trying to do with absolutely positioned elements unless you know how tall they're going to be (or, equivalently, you can specify their height). If you can specify the heights then you can put the same heights on the .container_row and everything will line up; you could also put a margin-top on the second .container_row to leave room for the absolutely positioned elements. For example:

http://jsfiddle.net/ambiguous/zVBDc/

How can I have multiple Divs stack on top of each other using Float and not absolute positioning?

float does not overlap with other floated objects in the same container. See here for an example of three successive floated objects to see how they don't overlap.

If you want objects to overlap, you will want/need to use absolute positioning. You can use positioning relative to the parent object by setting the parent to position:relative; and the child to position: absolute;. See here for an example of overlaping objects with absolute positioning relative to the parent.

If, you're trying to only have one of these objects actually display at a time, then just set the non-displayed objects to display: none and they will take no space in the page layout. You won't need to use float or absolute positioning.

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

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>