Make a div stick to the right edge of the parent and overlap others in the parent
<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>