Html+Css实例：居中五环（前端初学者）_javascript五环实例-CSDN博客

本文链接：https://blog.csdn.net/ZuzuVcdi/article/details/115029946

Html+Css实例：居中五环

相对定位和绝对定位：

  **positon:relative;** （相对定位）元素框偏移某个距离，元素仍
                       保持其未定位前的形状，他原本所占的空间仍保留。
                       
  **position:absolute;** （绝对定位）元素框从文档流完全删除，并
  相对于其包含块定位。包含块可能是文档中的另一个元素或者
  是初始包含块。元素原先在正常文档流中所占的空间会关闭，就
  好像元素原来不存在一样。元素定位后生成一个块级框，而不论
  原来它在正常流中生成何种类型的框。

效果：在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Title</title>
    <script src='main.js'></script>
    <link rel='stylesheet' type = 'text/css' media='screen' href = 'ten.css'>
</head>
<body>
    <div class="plat">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
        <div class="circle5"></div>
    </div>
</body>
</html>

/* 进行初始化 */
*{
    margin : 0;
    padding: 0;
} 
/* 设计基本圆 */
.circle1,
.circle2,
.circle3,
.circle4,
.circle5{
    position: absolute;
    width: 100px;
    height:100px;
    border: 10px solid black;
    border-radius: 50%;
}
/* 设计圆颜色 */
.circle1{
    border-color: red;
    left: 0;
    top: 0;
    
}
.circle2{
    border-color:green ;
    left: 130px;
    top: 0;
    z-index: 3;   /*z-index:数值; 属性设置元素的堆叠顺序，
                      数值越高（越低）置顶（置底）程度
                      越高，可为负值*/
}
.circle3{
    border-color: yellow;
    left:260px ;
    top: 0;
}
.circle4{
    border-color: blue;
    left: 65px;
    top: 70px;

}
.circle5{
    border-color: purple;
    left: 195px;
    top: 70px;
}
.plat{
    /* border: 5px solid black; */
    position: absolute;    /*绝对定位：相对于父级（body定位）脱离父级*/
    left: 50%;
    top: 50%;
    margin-top: -93px;
    margin-left: -190px;
    height: 186px;
    width: 380px;
}