title: Why absolutely positioned elements render over previous absolutely positioned element?
body: <p>In this code,</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#parent-div{
   background: #B3bEb5;
   border: 0.1em solid black;
  }
  
  
  #default{
    background: #DBE9F4;
  }
  #centered{
    background: #89CFF0;
    width: 50%;
    margin: auto;
  }
  
  /* text-align: left, right, center, justify */
  #centered-text{
    text-align: center;
  }
  
  /* Absolute Positioning : Positioning Based on the Document */
  #top-left-pos{
    background: #89CFF0;
    border: 0.1em solid black;
    position: absolute;
    width: 200px;
    height: 100px;
    
  }
  
  #bottom-right-tl-parent {
    background: #DBE9F4;
    position: absolute;
    bottom: 0px;
    right: 0px;
  }
  
  #another-pos{
    background: #FF0000;
    border: 0.1em solid black;
    position: absolute;
    width: 190px;
    height: 110px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="parent-div"&gt;
        &lt;div id="default"&gt;Default&lt;/div&gt;
        &lt;div id="centered"&gt;Centered&lt;/div&gt;
        &lt;div id="centered-text"&gt;Centered Text&lt;/div&gt;
      &lt;/div&gt;
  
      
      &lt;!-- Demonstrate Absolute Postioning --&gt;
  
      &lt;div id="top-left-pos"&gt;Top Left
        &lt;div id="bottom-right-tl-parent"&gt;Bottom Right Parent&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="another-pos"&gt;Top Right
      &lt;/div&gt;
      </code></pre>
  </div>
  </div>
  </p>
  
  <p>absolutely positioned <code>top-left-pos</code> element, positions in next row to <code>centered-text</code> element, whose behaviour similar to static positioned elements.</p>
  
  <p>But, 
  below is the output,</p>
  
  <h2><a href="https://i.stack.imgur.com/xkZMO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xkZMO.png" alt="enter image description here"></a></h2>
  
  <p>So, Why every new absolutely positioned element <code>another-pos</code>is rendered over previous absolutely positioned element <code>top-left-pos</code>? why <code>another-pos</code> element is not rendered as next block element?</p>
  
  <p>With the above code, am expecting <code>another-pos</code> element to be rendered as shown below,</p>
  
  <p><a href="https://i.stack.imgur.com/XcZUQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XcZUQ.png" alt="enter image description here"></a></p>