title: How to force divs to overlap each other, but have height?
body: <p>I have two or more divs which need to overlap each other (due some transition effects, i.e. switching tabs and slow disappear).</p>
  
  <p>Below these two divs there is a footer element.</p>
  
  <p>If I use <code>position: absolute</code> the parent element collapses and divs overlaps the footer element.</p>
  
  <p>I can calculate tallest height in scripts. But maybe there is CSS way to keep parent element's height together with tallest one, but let children visually overlap? </p>
  
  <p><strong>EDIT:</strong> width of the children is unknown as well, as design is responsive.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.parent{
   border: 1px solid green;
   position: relative;
  }
  
  .one{
   background-color: red;
   position: absolute;
   width: 300px;
  }
  
  .two{
   background-color: blue;
   position: absolute;
   width: 400px;
  }
  
  footer{
   border: 1px solid magenta;
   text-align: right;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
   &lt;div class="one"&gt;
    Div one to overlap. Height unknown, width unknown&lt;br&gt;
    Div one to overlap. Height unknown, width unknown&lt;br&gt;
    Div one to overlap. Height unknown, width unknown&lt;br&gt;
   &lt;/div&gt;
  
   &lt;div class="two"&gt;
    Div two to overlap. Height unknown, width unknown&lt;br&gt;
    Div two to overlap. Height unknown, width unknown&lt;br&gt;
   &lt;/div&gt;
  
   &lt;!-- ... ---&gt;
  
   &lt;footer&gt;
    Footer must be below all divs
   &lt;/footer&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>