Eu tenho 3 níveis de div
:
- (Em verde abaixo) Um nível superior
div
comoverflow: hidden
. Isso ocorre porque eu quero que algum conteúdo (não mostrado aqui) dentro dessa caixa seja cortado se exceder o tamanho da caixa. - (Em vermelho abaixo) Dentro disso, eu tenho
div
composition: relative
. O único uso para isso é para o próximo nível. - (Em azul abaixo) Finalmente,
div
eu retiro o fluxo com oposition: absolute
qual quero posicionar em relação ao vermelhodiv
(não à página).
Gostaria que a caixa azul fosse retirada do fluxo e expandida além da caixa verde, mas posicionada em relação à caixa vermelha, como em:
No entanto, com o código abaixo, recebo:
E removendo a position: relative
caixa vermelha, agora a caixa azul pode sair da caixa verde, mas não está mais posicionada em relação à caixa vermelha:
Existe uma maneira de:
- Mantenha o
overflow: hidden
na caixa verde. - A caixa azul se expandiu além da caixa verde e foi posicionada em relação à caixa vermelha?
A fonte completa:
#d1 {
overflow: hidden;
background: #efe;
padding: 5px;
width: 125px;
}
#d2 {
position: relative;
background: #fee;
padding: 2px;
width: 100px;
height: 100px;
}
#d3 {
position: absolute;
top: 10px;
background: #eef;
padding: 2px;
width: 75px;
height: 150px;
}
<br/><br/><br/>
<div id="d1" >
<div id="d2" >
<div id="d3"></div>
</div>
</div>
position: fixed
irá ignorar o overflow:hidden
de qualquer elemento que contenha.