title: Make a div stick to the right edge of the parent and overlap others in the parent
body: <p>I need to place a div stick to the right edge of its parent div and when re-sizing the browser window, it should overlap other elements in the same parent and they should be hidden.</p>
  
  <p>This image tells the story</p>
  
  <p><a href="https://i.stack.imgur.com/wke7J.png" rel="noreferrer"><img src="https://i.stack.imgur.com/wke7J.png" alt="enter image description here"></a></p>
  
  <p>Please note that, I don't want that div to have fixed position. It should scroll just like others and the elements (texts or whatever) should be under it. Just like the attached image.</p>
  
  <p>I tried the following code but, it made the red div stick to the edge of its grandparent. </p>
  
  <pre><code>.redarea{
      position:absolute;
      float:right;
  }
  </code></pre>
  
  <p>What's the way of getting this done ?</p>