Há alguma maneira no css de eu colocar um elemento filho com position absolute cobrindo a página inteira, dentro de um elemento com um width e um height ?
Obs: O elemento pai tem que ter position relativo relativo !
Oi, Bruno, tudo bem?
Pelo que intendi tu quer que o elemento filho crie um contexto em que o elemento pai fique "escondido"?
Se for isso, pode ser assim?
<div class="elemento elemento-pai>
<div class="elemento-filho">Filho</div>
</div>.elemento {
width: 200px;
height: 200px;
line-height: 200px;
color: #FFF;
text-align: center;
cursor: pointer;
}
.elemento-pai {
position: relative;
background-color: blue;
}
.elemento-filho {
position: absolute;
width: 300px;
height: 300px;
line-height: 100px;
background-color: red;
}Nesse exemplo, o elemento filho está com o position:relative e o filho com position: absolute, e o elemento filho cobre o pai. Para cobrir a página você deverá ajustar os posicionamentos de acordo como está o seu código e estilização do body.
Espero ter te ajudado :}
Show Lais !
Mas esqueci de mencionar algo que eu precisava no post, eu precisava que esse elemento filho cobrisse 100% da tela.
Na prática eu queria que isso fosse um modal. O elemento "pai" seria um body normal ( só que ele não cobre 100% da tela) e o elemento filho seria 100% da tela ( ele seria o background do modal e dentro desse background teria o modal). O que você fez ai no código foi exatamente o que eu tinha tentado só que 100% no elemento "filho".