居中五环、两栏布局 【定位】

居中五环、两栏布局 【定位】

1. absolute绝对定位
   • 脱离原来位置进行定位
   • 相对于最近的有定位的父级进行定位，如果没有，那么相对于文档进行定位
2. relative
   • 保留原来位置进行定位
   • 相对于自己原来的位置进行定位
3. fixed
   • 滚动页面不动
4. static(默认值)

用relative作为参照物，用absolute进行定位

<!-- 五环固定中间不动 -->
<div class="demo"></div>
<div class="box"></div>
<div class="plat">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
    <div class="circle5"></div>
</div>

<!-- 两栏布局 -->
<div class="right"></div>
<div class="left"></div>

.circle1,
.circle2,
.circle3,
.circle4,
.circle5{
	position: fixed;
	width: 100px;
	height: 100px;
	border-radius: 50%;
}
.circle1{
	border: 10px solid black;
	margin-left: -50px;
	margin-top: -50px;
}
.circle2{
	border: 10px solid blue;
	margin-left: -170px;
	margin-top: -50px;
}
.circle3{
	border: 10px solid red;
	margin-top: -50px;
	margin-left: 70px;
	z-index:3
}
.circle4{
	border: 10px solid yellow;
	margin-left: -110px;
}
.circle5{
	border: 10px solid green;
	margin-left: 10px;
}

.right{
	position: absolute;
	right: 0;
	width: 100px;
	height: 100px;
	background-color: #0ff;
	/*opacity: 0.5;*/
}
.left{
	margin-right: 100px;
	height: 100px;
	background-color: #0f0;
}