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

Navigation
2

You may find it unnecessary, but it is because of an effect that I want to use, and my question is this, if you have how to put a div overlapping another using only relative position in the two

    
asked by anonymous 09.08.2016 / 20:50

3 answers

2

You can do 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>
    
09.08.2016 / 20:57
2

The best way is to use position:absolute;

however, you can set yourself like 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

    
09.08.2016 / 20:58
0

In this case you will need the div parent and div child.

Follow below: 

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

In css the code looks something like this: 

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

Link:

link

    
09.08.2016 / 20:55
Configure the spreadsheet created by java with jxl Pass data between fragments