實現功能： 當滑動頁面時，奧運五環固定在中間。 涉及到的知識： 相對定位、絕對定位、固定定位、z-index、border-radius 關鍵知識點： 1、絕對定位和相對定位的區別： position: absolute; 脫離原來位置進行定位；定位的參照物是離自己最近的有定位的父級，參照最近的有定 ...
實現功能：
當滑動頁面時，奧運五環固定在中間。
涉及到的知識：
相對定位、絕對定位、固定定位、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 }
