2

Como posso fazer para a div absoluta(id 3) fique por cima das outras divs e não ative o overflow da div pai(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>

1 Resposta 1

1

Quando você define um overflow na div, ela restringe tudo que está nela à sua área, pois é pra isso que serve o overflow. Mesmo colocando elementos com position absolute, eles ficarão confinados à área da div. Portanto não faz sentido colocar uma div maior sem querer que ela respeite a regra do overflow.

A solução é tirar a div 3 da div 2 e posicionar o right usando calc subtraindo a largura da div 1 pela largura total da div 2 (width + padding), e setando também a div 1 com 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .