使用CSS的Position属性实现奥运五环，使用到了position的fixed和absolute定位属性，fiex属性让五环居于浏览器的中央，absolute属性用于五环的布局。
html代码
CSS代码
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</body>
body布局
body使用fixed属性，top和left设置成50%，居于浏览器中央，五环是380*180，要居于中央就要设置margin。
body{
position: fixed;
top:50%;
left:50%;
border:1px solid black;
margin-left: -190px;
margin-top:-90px;
width:380px;
height:180px;
}
五环布局
五个环宽和高都是100，border-radius添加圆角边距，当是50%正好是圆，设置绝对定位，五个环通过设置top和left来布局，z-index设置环的堆叠顺序。值大的在上边，小的在下边。
.one,.two,.three,.four,.five{
width:100px;
height:100px;
border-radius: 50%;
position: absolute;
}
.two{
border:10px solid black;
left:130px;
z-index: 5;
}
完整的HTML代码
Document
*{
padding:0px;
margin:0px;
}
body{
position: fixed;
top:50%;
left:50%;
border:1px solid black;
margin-left: -190px;
margin-top:-90px;
width:380px;
height:180px;
}
.one,.two,.three,.four,.five{
width:100px;
height:100px;
border-radius: 50%;
position: absolute;
}
.one{
border:10px solid blue;
z-index: 5;
}
.two{
border:10px solid black;
left:130px;
z-index: 5;
}
.three{
border:10px solid red;
left:260px;
z-index: 5;
}
.four{
border:10px solid yellow;
left:70px;
top:60px;
z-index: 2;
}
.five{
border:10px solid green;
left:195px;
top:60px;
z-index: 2;
}
本人初学CSS，一些拙见，如有不对之处欢迎指正。更多个人的文章，可查看个人博客拼码工