title: Why do absolute elements stack up on each other instead of stacking one after the other?
body: <p>How can get both <code>#row1</code> and <code>#row2</code> in the following code to be visible, one after the other vertically, as if there wasn't any <code>absolute/relative</code> positioning involved (though without removing the positioning properties)? I.e. having the two <code>.row</code> <code>&lt;div&gt;</code> to appear as &quot;normal&quot; block elements.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body { position:relative; min-height: 2em; width: 100%; }
  .container {position:absolute;}
  .row {position:relative;}
  .col1, .col2 {position: absolute;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="container"&gt;
      &lt;div id="row1" class="row"&gt;
        &lt;div class="col1"&gt;Hello&lt;/div&gt;
        &lt;div class="col2"&gt;World&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="row2" class="row"&gt;
        &lt;div class="col1"&gt;Salut&lt;/div&gt;
        &lt;div class="col2"&gt;le monde&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>(Sample also available as a <a href="http://jsfiddle.net/wjrNQ/" rel="nofollow noreferrer">fiddle</a>.)</p>
  <p>I need the elements to have the positioning provided in the CSS rules, for reasons excluded here.</p>
  <p>The content is programmatically dynamic; I don't know the elements' heights beforehand, so a solution can't be based on specifying an absolute length (e.g. 'px') anywhere.</p>