Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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".