1、’效果
1.1、五环
1.2远视图
2、技术css定位（position：relative/absolute/fixed）
2.1、绝对定位（absolute）
绝对定位的元素从文档流中拖出，使用left、right、top、bottom等属性相对于其最接近的一个最有定位设置的父级元素进行绝对定位，如果元素的父级没有设置定位属性，则依据 body 元素左上角作为参考进行定位。绝对定位元素可层叠，层叠顺序可通过 z-index 属性控制，z-index值为无单位的整数，大的在上面，可以有负值。
绝对定位的定位方法：如果它的父元素设置了除static之外的定位，比如position:relative或position:absolute及position:fixed，那么它就会相对于它的父元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非相对于浏览器窗口，相对于窗口定位的是fixed）
2.2、相对定位（relative）
相对定位元素不可层叠，依据left、right、top、bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。
2.3、固定定位（fixed）
固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。
固定定位的最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏，不需使用margin、border、padding。
源码部分：
1、html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>远视图+五环</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div>
<strong>css练习</strong>
</div>
<br><hr>
<div class="contents">
<div class="contents1">
<div class="contents2">
<div class="contents3">
<div class="contents4"></div>
</div>
</div>
</div>
</div>
<br>
<div class="wuhuan"></div>
<hr>
<div class="flexbj">
<div class="aoyun1"></div>
<div class="aoyun2"></div>
<div class="aoyun3"></div>
<div class="aoyun4"></div>
<div class="aoyun5"></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
2、css部分
*{
margin: 0px;
}
strong{
text-align: center;
margin-left: 50%;
font-size: 88px;
font-weight: 800;
}
/*****/
.contents4{
width: 100px;
height: 100px;
margin: 100px 100px;
background-color: black;
position: absolute;
}
.contents3{
width: 300px;
height: 300px;
margin: 100px 100px;
position: absolute;
background-color: blue;
}
.contents2{
width: 500px;
height: 500px;
margin: 100px 100px;
position: absolute;
background-color: black;
}
.contents{
width: 700px;
height: 700px;
margin: 100px 100px;
position: absolute;
background-color: blue;
}
/****/
.wuhuan{
margin-top: 800px;
width: 100px;
height: 100px;
}
.flexbj{
display: flex;
justify-content: center;
align-items: center;
position: fixed;
padding-left: 40%;
}
.aoyun1{
width: 300px;
height: 300px;
border: 10px solid blue;
border-radius: 50%;
position: relative;
}
.aoyun2{
width: 300px;
height: 300px;
border: 10px solid green;
border-radius: 50%;
position: absolute;
margin-left: 200px;
/* margin-left: -100px; */
/* margin-left: 200px; */
}
.aoyun3{
width: 300px;
height: 300px;
position: absolute;
margin-left: 400px;
/* margin-left: 200px; */
border: 10px solid goldenrod;
border-radius: 50%;
}
.aoyun4{
width: 300px;
height: 300px;
position: absolute;
margin-left: 100px;
margin-top: 200px;
/* margin-left: 200px; */
border: 10px solid goldenrod;
border-radius: 50%;
}
.aoyun5{
width: 300px;
height: 300px;
position: absolute;
margin-left: 300px;
margin-top: 200px;
/* margin-left: 200px; */
border: 10px solid goldenrod;
border-radius: 50%;
}