结合绝对定位\相对定位\固定定位写一个奥运五环案例

实现功能：

当滑动页面时，奥运五环固定在中间。

涉及到的知识：

相对定位、绝对定位、固定定位、z-index、border-radius

关键知识点：

1、绝对定位和相对定位的区别：

position: absolute;  脱离原来位置进行定位；定位的参照物是离自己最近的有定位的父级，参照最近的有定位的父级进行定位，如果没有，那么相对文档进行定位
position: relative; 保留原来位置进行定位；定位的参照物是自己原来的位置，相对自己原来的位置进行定位
 
定位使用小经验：一般用relative来定位参照物，因为可以保留原有的位置，让自己不受影响
 
div.center的定位是使用固定定位position: fixed;
圆环的定位是用的绝对定位，参照物是父级div.center
left、top的值都是根据展示的样式计算的
z-index的数值决定层级的覆盖
 
2、圆环:
div + border + border-radius 结合制作圆环
 
 
相关代码如下
1.html
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 <link rel="stylesheet" href="./1.css" class="css">
 8 <title>奥运五环</title>
 9 </head>
10 <body>
11 <div class="center">
12 <div class="blue">
13 </div>
14 <div class="yellow">
15 </div>
16 <div class="black">
17 </div>
18 <div class="green">
19 </div>
20 <div class="red">
21 </div>
22 </div>
23 <div class="content"></div>
24 </body>
25 </html>
 
1.css
 1 *{
 2 margin: 0;
 3 padding: 0;
 4 }
 5 div.center{
 6 width: 800px;
 7 height: 400px;
 8 border: 1px solid #000;
 9 position: fixed;
10 left: 50%;
11 top: 50%;
12 margin-left: -400px;
13 margin-top: -200px;
14 }
15 .center>div{
16 width: 100px;
17 height: 100px;
18 border-radius: 50%;
19 }
20 .blue{
21 border: 10px solid blue;
22 position: absolute;
23 left: 200px;
24 top: 150px;
25 }
26 .yellow{
27 border: 10px solid yellow;
28 position: absolute;
29 left: 275px;
30 top: 200px;
31 z-index: 1;
32 }
33 .black{
34 border: 10px solid black;
35 position: absolute;
36 left: 350px;
37 top: 150px;
38 }
39 .green{
40 border: 10px solid green;
41 position: absolute;
42 left: 425px;
43 top: 200px;
44 z-index: 1;
45 }
46 .red{
47 border: 10px solid red;
48 position: absolute;
49 left: 500px;
50 top: 150px;
51 }
52 /*制作滚动条*/
53 .content{
54 height: 10000px;
55 width: 10000px;
56 }

 

posted @ 2020-07-12 12:51  前端小瑶  阅读(466)  评论(0)  编辑  收藏  举报