title: How to position absolute inside a div?
body: <p>I'm having a strange problem positioning a set of divs inside another div. I think it will be best to describe it with an image:</p>
  
  <p><a href="https://i.stack.imgur.com/v6C3g.png" rel="noreferrer"><img src="https://i.stack.imgur.com/v6C3g.png" alt="image"></a></p>
  
  <p>Inside the black (#box) div there are two divs (.a, .b) that have to positioned in the same place. What I'm trying to achieve is pictured in the first image, second one is the effect I get. It looks like if the divs were floated without clearing or something, which is obviously not the case. Any ideas would be welcome!</p>
  
  <p>Here's the code for this sample:</p>
  
  <p>CSS:</p>
  
  <pre><code>#box {
      background-color: #000;
      position: relative;
      padding: 10px;
      width: 220px;
  }
  
  .a {
      width: 210px;
      position: absolute;
      top: 10px;
      left: 10px;
      background-color: #fff;
      padding: 5px;
  }
  
  .b {
      width: 210px;
      position: absolute;
      top: 10px;
      left: 10px;
      background-color: red;
      padding: 5px;
  }
  
  #after {
      background-color: yellow;
      padding: 10px;
      width: 220px;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div id="box"&gt;
          &lt;div class="a"&gt;Lorem&lt;/div&gt;
          &lt;div class="b"&gt;Lorem&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="after"&gt;Hello world&lt;/div&gt;
  </code></pre>