效果是这个样子的:
所用技术:
position:basolute;
position:fixed;
将元素始终在浏览器可视区水平垂直居中:
left:50%;
top:50%;
margin-left:负的自身宽度一半
magin-top:负的自身高度的一半
HTML部分:
<div class="wrapper">
<div class="size red">1</div>
<div class="size black">2</div>
<div class="size green">3</div>
<div class="size blue">4</div>
<div class="size yellow">5</div>
</div>
css样式:
*{
margin: 0px;
padding: 0px;
}
.wrapper{
width: 370px;
height: 160px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -185px;
margin-top: -80px;
/*background-color: gray;*/
}
.size{
border-radius: 50%;
height: 100px;
width: 100px;
position: absolute;
}
.red{
border: 5px solid #f00;
}
.black{
border: 5px solid #000;
left: 130px;
}
.green{
border: 5px solid #0f0;
left: 260px;
}
.blue{
border: 5px solid #00f;
left: 65px;
top: 50px;
z-index: 1
}
.yellow{
border:5px solid yellow;
left: 180px;
top: 50px;
z-index: 1;
}
body{
height: 2000px;
width: 2000px;
}