Relative positioning, the difference between absolute positioning

Relative positioning: the relative position of the original element itself , in the premise of continuing the original position occupied displacement amount in a fixed position

Absolute positioning: This element relative to the parent element ( the parent element need to set the position property , if the parent element is not set, there will continue to look up the position of the elements, until find the body )

1) defines two block-level element div

<div class="css1">
</div> 
<div class="css2">
</div> 

Stylesheet as follows

 .css1{
height:200px;
width:200px;
background-color:blue;
}
 .css2{
height:200px;
width:200px;
background-color:orange;
}

Operating results as shown:

2) the relative positioning walk wave (css1 set to relative positioning)

 .css1{
height:200px;
width:200px;
background-color:blue;
position:relative;
top:200px;
left:200px;
}

Results shown in Figure

Here we can see that the second block-level element CSS2 (yellow) and not to a vacant area above ( because the entire upper block element row is still occupied css1 )

3) Absolute positioning to go up (still let css1 block-level elements absolutely positioned, but added a parent element, set the position property)

code show as below

 .css1{
height:200px;
width:200px;
background-color:blue;
position:absolute;
top:200px;
left:200px;
}

<div style="position:relative;">
<div class="css1">
</div> 
<div class="css2">
</div> 
</div>

Results are as follows

Here you can see

Css2 block elements have accounted for the position of the original css1 i.e. absolutely positioned element does not occupy the original position;