Position Absolute not activate overflow: auto

Asked

Viewed 219 times

2

How can I make for the div absolute(id 3) stay on top of the others Divs and does not activate the overflow of div father(id 2)?

<div id="1" style="background: red; width: 400px">
    <div id="2" style="position: relative; background: blue; padding: 2px; width: 150px; height: 150px; overflow-y: auto;">
        <div id="3" style="position: absolute; top: 10px; right: 0; background: #eef; padding: 2px; width: 100px; height: 300px"></div>
    </div>
</div>

html css

1 answer

1


When you define a overflow in div, it restricts everything in it to your area, because that’s what the overflow. Even putting elements with position absolute, they will be confined to the area of div. So it makes no sense to put a div without wanting her to respect the rule of overflow.

The solution is to take the div 3 of div 2 and position the right using calc subtracting the width of the div 1 by the total width of the div 2 (width + padding), and also set the div 1 with position relative:

<div id="1" style="background: red; width: 400px; position: relative;">
    <div id="2" style="position: relative; background: blue; padding: 2px; width: 150px; height: 150px; overflow-y: auto;">
    </div>
     <div id="3" style="position: absolute; top: 10px; right: calc(100% - 154px); background: #eef; padding: 2px; width: 100px; height: 300px"></div>
</div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.