HTML四种定位-粘滞定位

粘滞定位

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8     <link rel="stylesheet" href="../CSS/reset.css">
 9     <style>
10         body{
11             height: 3000px;
12         }
13         .nav{
14             width: 1210px;
15             height: 48px;
16             background-color: #EBE7E3;
17             margin: 100px auto;
18             /* 
19             粘滞定位
20               -当元素的position属性设置为sticky时则开启了元素的粘滞定位
21               -粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定
22             */
23             position: sticky;
24             top: 0;
25         }
26         .nav li{
27             /* 水平设置 */
28             float: left;
29              /* 设置li的高度
30             height: 48px; */
31             /* 将文字在父元素中垂直居中 */
32             line-height: 48px;
33            
34         }
35         
36         .nav a{
37             text-decoration: none;
38             color: #777;
39             font-size: 18px;
40             /* 设置为块元素 整体可点 */
41             display: block;
42 
43             padding: 0 39px;
44         }
45         .nav li:last-child a{
46             padding: 0 42px 0 41px;
47         }
48         .nav li:hover{
49             background-color: #3f3f3f;
50             color: #e8e7e3;
51         }
52     </style>
53 </head>
54 <body>
55     <ul class="nav">
56         <li><a href="#">HTML/CSS</a></li>
57         <li><a href="#">Browser Side</a></li>
58         <li><a href="#">Server Side</a></li>
59         <li><a href="#">Programming</a></li>
60         <li><a href="#">XML</a></li>
61         <li><a href="#">Web Building</a></li>
62         <li><a href="#">Reference</a></li>
63     </ul>
64 </body>
65 </html>

当元素的position属性设置为sticky时则开启了元素的粘滞定位

粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定

当被设置粘滞定位的元素被滚轮将要滚过页面时，会固定在已设置的位置，而不是移除屏幕，类似于导航条

（注意观察图片滑轮的位置）