老师，为什么实现不了
来源：2-28 项目作业
qq_慕仰20210716
2021-08-09 17:16:57
<!-- <!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>方法3:6个div颜色层叠相互覆盖</title> <style> .rainbow { width: 500px; height: 200px; position: relative; overflow: hidden; }
.rainbow .purple, .rainbow .blue, .rainbow .green, .rainbow .yellow, .rainbow .orange, .rainbow .white { border-radius: 50%; position: relative; left: 20px; top: 20px; }
.rainbow .purple { width: 500px; height: 500px; left: 0; top: 0; background-color: purple; }
.rainbow .blue { width: 460px; height: 460px; background-color: lightskyblue; }
.rainbow .green { width: 420px; height: 420px; background-color: lightseagreen; }
.rainbow .yellow { width: 380px; height: 380px; background-color: yellow; }
.rainbow .orange { width: 340px; height: 340px; background-color: orange; }
.rainbow .white { width: 300px; height: 300px; background-color: white; } </style></head>
<body> <div class="rainbow"> <div class="purple"> <div class="blue"> <div class="green"> <div class="yellow"> <div class="orange"> <div class="white"></div> </div> </div> </div> </div> </div> </div></body>
</html> --><!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { width: 800px; height: 800px; border: 1px solid #000; } .box .red { width: 700px; height: 700px; border-radius: 50% 50%; background-color: red; position: relative; } .box .red .orange { position: absolute; top: 50%; left: 50%; margin-top: -300px; margin-left: -300px; width: 600px; height: 600px; background-color: orange; border-radius: 50% 50%; position: relative; } .box .red .orange .yellow { position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -250px; width: 500px; height: 500px; background-color: yellow; border-radius: 50% 50%; position: relative; } .box .red .orange .yellow .green { position: absolute; top: 50%; left: 50%; margin-top: -200px; margin-left: -200px; width: 400px; height: 400px; background-color: green; border-radius: 50% 50%; position: relative; } .box .red .orange .yellow .green .blue { position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -150px; width: 300px; height: 300px; background-color: blue; border-radius: 50% 50%; position: relative; } .box .red .orange .yellow .green .blue .purple { position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; width: 200px; height: 200px; background-color: purple; border-radius: 50% 50%; } </style> </head> <body> <div class="box"> <div class="red"> <div class="orange"> <div class="yellow"> <div class="green"> <div class="blue"> <div class="purple"></div> </div> </div> </div> </div> </div> </div> </body></html>
1回答
-
同学你好，css代码中一些彩虹盒子设置绝对定位属性之后，又设置了相对定位属性，覆盖了前面设置的绝对定位属性，导致实现绝对居中的代码没有生效。
建议：让这些彩虹盒子全部相对于第一个彩虹盒子进行偏移，而不是相对于上一层父盒子偏移，参考代码
最后，给最外层的box盒子设置合适的高度，以及超出隐藏属性，即可实现彩虹效果，代码如下
祝学习愉快！
0
相似问题