Podem achar desnecessário, mas é por causa de um efeito que eu quero usar, e minha dúvida é essa, se tem como colocar uma div sobrepondo outra usando apenas posição relativa nas duas
3 Respostas
Você pode fazer assim:
Usando position relative
section div:first-child {
background-color: red;
width: 150px;
height: 150px;
position: relative;
}
section div:last-child {
background-color: blue;
width: 150px;
height: 150px;
position: relative;
margin-top: -130px;
margin-left: 20px;
}
<section>
<div></div>
<div></div>
</section>
Usando position relative
e float
section div:first-child {
background-color: red;
width: 150px;
height: 150px;
position: relative;
float: left;
}
section div:last-child {
background-color: blue;
width: 150px;
height: 150px;
position: relative;
top: 20px;
margin-left: 20px;
}
<section>
<div></div>
<div></div>
</section>
Usando position absolute
section div:first-child {
background-color: red;
width: 150px;
height: 150px;
position: absolute;
}
section div:last-child {
background-color: blue;
width: 150px;
height: 150px;
position: absolute;
margin-top: 20px;
margin-left: 20px;
}
<section>
<div></div>
<div></div>
</section>
A melhor forma é usar o position:absolute;
porém, você pode setar assim como o seguinte exemplo também
top:-2em; /*Vai subir o elemento 2em em relação ao pai*/
*lembrando que você precisa colocar um float
no elemento
Nesse caso você vai precisar da div pai e da div filho.
Segue abaixo:
<div class="x">
<div class="y"></div>
</div>
No css o código ficará mais ou menos assim:
div.x{ position:absolute; }
div.x .y { position:relative; }
Link: