5

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 3

5

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>

2

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

0

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:

http://codepen.io/profissionalweb04/pen/jAQovJ

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 .