二：position: relative;——相对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.demo{
height: 100px;
width: 100px;
background-color: red;
position: relative;
left: 100px;
top: 100px;
}
</style>
<title></title>
</head>
<body>
<div class="demo"></div>
<div class="box"></div>
</body>
</html>
跟刚才没啥区别。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.demo{
height: 100px;
width: 100px;
background-color: red;
position: relative;
opacity: 0.5;
}
.box{
height: 150px;
width: 150px;
background-color: green;
}
</style>
<title></title>
</head>
<body>
<div class="demo"></div>
<div class="box"></div>
</body>
</html>
是这个样子，我把position: relative;去掉，他还是这样。
没变化说明不是层了吧？
不是，现在试试，position: relative;left: 100px;top: 100px;
它变成了这样，如果不是一个层的话，红色的层下来之后他会把绿色的层顶开，但是现在他俩层叠在一起了。
那为什么绿色方块不上去了呢？
这是因为relation有一个特殊的地方，保留原来位置进行定位。
咱们再看relative相对于谁进行定位。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.demo1{
height: 200px;
width: 200px;
background-color: orange;
margin-left: 100px;
}
.demo2{
margin-left: 100px;
height: 100px;
width: 100px;
background-color: black;
}
.demo3{
left: 50px;
height: 50px;
width: 50px;
background-color: yellow;
}
</style>
<title></title>
</head>
<body>
<div class="demo1">
<div class="demo2">
<div class="demo3">
</div>
</div>
</div>
</body>
</html>
再给demo3加个相对定位position: relative;
相对于父级吗，相对于祖父级吗？
都不是，他是相当于原来他出生的位置进行定位的。
所以当你把left: 50px;改成right: 50px;的时候，
就相当于原来的位置定位了。
咱们在用的时候把relative作为参照物，用absolute进行定位。