How to put one div overlapping another using only relative position?

Asked

Viewed 31,945 times

4

You may find it unnecessary, but it’s because of an effect I want to use, and my question is this, if there’s any way to put one div overlapping another using only relative position on both

html css web-application

3 answers

5


You can do it like this:

Using 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>

Using position relative and 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>

Using 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

The best way is to use the position:absolute;

however, you can set as well as the following example too

top:-2em; /*Vai subir o elemento 2em em relação ao pai*/

*remembering that you need to put a float in the element

0

In that case you’ll need the div father and of div son.

Goes below:

<div class="x"> 
    <div class="y"></div> 
</div>

In css the code will look something like this:

div.x{ position:absolute; }
div.x .y { position:relative; }

Link:

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

Browser other questions tagged html css web-application

You are not signed in. Login or sign up in order to post.