粘滯定位
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時則開啟了元素的粘滯定位
粘滯定位和相對定位的特點基本一致，不同的是粘滯定位可以在元素到達某個位置時將其固定
當被設置粘滯定位的元素被滾輪將要滾過頁面時，會固定在已設置的位置，而不是移除屏幕，類似於導航條
（注意觀察圖片滑輪的位置）
