postion元素:relative/absolute：*
are relative and absolute common properties in css targeting. Here's to find out the difference between relative and absolute. And how to make good positioning in the sub-parent situation?
The initial code is as follows
html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>定位的几种用法</title>
<link rel="stylesheet" href="./example1.css">
</head>
<body>
<div class="wrapper">
<div class="superfather">
<span>我是爷爷</span>
<div class="father">
<span>我是爷爷的儿子爸爸</span>
<div class="son1">
<span>我是爸爸的儿子1</span>
</div>
<div class="son2">
<span>我是爸爸的儿子2</span>
</div>
</div>
</div>
</div>
</body>
</html>
css code
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.wrapper{
height: 700px;
width: 1900x;
background-color: white;
padding-top: 20px;
}
.father{
height: 200px;
width: 400px;
background-color: green;
padding-top: 20px;
}
.son1{
height: 100px;
width: 200px;
background-color:red;
}
.superfather{
height: 300px;
width: 500px;
background-color:yellow;
margin: 0 auto;
}
.son2{
height: 100px;
width: 200px;
background-color:gray;
}
FIG effect as
The first step: Modify the son Attribute 1 position for absoute plus left top property
renderings: 
discover at this time the son of a positioning reference point is the top left corner of the browser
Step Two: Give Dad property plus a position relative / absolute can be 
at this time, found. Positioning reference point subclass changed, he is the upper left corner of the parent class! ! !
We canceled the father's position, what position to try to increase my grandfather would happen? 
Can see son 1 in the immediate parent class has no postion property cases, as long as all of its parent class have postion property, it will be positioned on the upper left corner of the parent class!
The difference between relative and absolute: the second step
is based on their relative positioning
absolute positioning is the parent class (if there are circumstances under parent) based, if not still relative to the upper left corner of the browser point positioning.
1. When the father has the position property, son 1position property is absolute, as usual, is still positioned based on the parent class.
2 When the son 1position properties based on the parent class is not found relative, but their positioning based on the position at which
Third : Why is the parent class has subclasses relative aboslute use it?
Parent with relative positioning is based on their position, you can easily modify the location in the browser.
And the subclass is the parent class with abosulte based positioning, the position changes when the parent class, subclass will follow changes.