用css实现奥运五环样式，并且于页面居中显示，不随页面滚动条而移动，一直处于居中位置。
html代码部分就一个div里边包含5个div。代码如下：
Document
div.main{
position: fixed;
left: 50%;
top: 50%;
margin-left: -190px;
margin-top: -95px;
}
div.cir1{
width: 100px;
height: 100px;
border:10px solid #00f;
border-radius: 50%;
z-index: 1;
position: relative;
}
div.cir2{
width: 100px;
height: 100px;
border: 10px solid #ff0;
border-radius: 50%;
z-index: 2;
position: absolute;
left: 60px;
top: 50px;
}
div.cir3{
width: 100px;
height: 100px;
border: 10px solid #000;
border-radius: 50%;
z-index: 1;
position: absolute;
left: 130px;
top: 0px;
}
div.cir4{
width: 100px;
height: 100px;
border: 10px solid #0f4;
border-radius: 50%;
z-index: 1;
position: absolute;
left:200px;
top:50px;
}
div.cir5{
width: 100px;
height: 100px;
border: 10px solid #f00;
border-radius: 50%;
z-index: 2;
position: absolute;
left: 260px;
top: 0px;
}
效果图：
本文地址：/loringray/article/details/85947668
