爱站程序员基地* {margin: 0;padding: 0;}.wrapper {position: relative;border: 2px solid#fff;border-radius: 50%;top: 20%;left: 30%;}.demo {position: absolute;border: 2px solid pink;border-radius: 50%;padding: 10px;top: 20%;left: 30%;}.wrapper1 {position: relative;border: 2px solid#fff;border-radius: 50%;top: 20%;left: 39%;}.demo1 {position: absolute;border: 2px solid #344;border-radius: 50%;padding: 10px;top: 20%;left: 39%;}.wrapper2 {position: relative;border: 2px solid#fff;border-radius: 50%;top: 20%;left: 48%;}.demo2 {position: absolute;border: 2px solid #f40;border-radius: 50%;padding: 10px;top: 20%;left: 48%;}.wrapper3 {position: relative;border: 2px solid#fff;border-radius: 50%;top: 37%;left: 34%;}.demo3 {position: absolute;border: 2px solid purple;border-radius: 50%;padding: 10px;top: 37%;left: 34%;}.wrapper4 {position: relative;border: 2px solid#fff;border-radius: 50%;top: 37%;left: 43%;}.demo4 {position: absolute;border: 2px solid chocolate;border-radius: 50%;padding: 10px;top: 37%;left: 43%;}
标准答案（居中五环）
}.plat {position: absolute;height: 186px;width: 380px;top: 50%;left: 50%;margin-left: -190px;margin-top: -93px;}.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;}.circle3 {border-color: chocolate;left: 260px;top: 0;}.circle4 {border-color: cornflowerblue;left: 65px;top: 70px;}.circle5 {border-color: darkorchid;left: 195px;top: 70px;}
重叠的元素
-
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
-
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
-
一个元素可以有正数或负数的堆叠顺序。
-
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面
-
注意： 如果两个定位元素重叠，没有指定z – index，最后定位在HTML代码中的元素将被显示在最前面
