层模型
如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
绝对定位和相对定位 有以下四个属性
left
top
right
bottom
1、position:absolute
脱离原来位置进行定位，常有原位置被清除，随后元素占据，absolute在最上层
最近的有定位的父级进行定位，如果没有，则相对于文档进行定位。
2、position:relative
保留原来位置进行定位。
相对自己原来的位置进行定位
notice:用relative设置参照物，用absolute进行定位
3、position:fixed
== 广告定位，也就是固定定位==
4、z-index:1就是z轴，数值越大，越靠近"你"，默认是0
实践:五环居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五环居中</title>
<style>
*{
margin:0px;
padding:0px;
}
.plot{
position:absolute;
width:760px;
height:340px;
left:50%;
top:50%;
margin-left:-380px;
margin-top:-170px;
}
.circle1,
.circle2,
.circle3,
.circle4,
.circle5{
position:absolute;
width:200px;
height:200px;
border-radius: 50%;
border:20px solid red;
}
.circle1{
border-color: red;
top:0px;
left:0px;
}
.circle2{
border-color: green;
top:0px;
left:260px;
z-index: 5;
}
.circle3{
border-color: yellow;
top:0px;
left:520px;
}
.circle4{
border-color: blue;
top:100px;
left:130px;
}
.circle5{
border-color: purple;
top:100px;
left:390px;
}
</style>
</head>
<body>
<div class="plot">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
</div>
</body>
</html>
效果:
实践：两栏分布
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两栏布局</title>
<style>
*{
margin:0px;
padding:0px;
}
.left{
position:absolute;
right:0px;
width:50%;
height:100px;
background-color:#FCE;
opacity:0.5;
}
.right{
height:100px;
width:50%;
background-color:#EFFFFF;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
结果：
