結合絕對定位\相對定位\固定定位寫一個奧運五環案例
阿新 • • 發佈：2020-07-13
實現功能：
當滑動頁面時，奧運五環固定在中間。
涉及到的知識：
相對定位、絕對定位、固定定位、z-index、border-radius
關鍵知識點：
1、絕對定位和相對定位的區別：
position: absolute;脫離原來位置進行定位；定位的參照物是離自己最近的有定位的父級，參照最近的有定位的父級進行定位，如果沒有，那麼相對文件進行定位 position: relative;保留原來位置進行定位；定位的參照物是自己原來的位置，相對自己原來的位置進行定位 定位使用小經驗：一般用relative來定位參照物，因為可以保留原有的位置，讓自己不受影響 div.center的定位是使用固定定位position: fixed;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 *{
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 }