position: fixed是CSS固定定位，一般用於導航欄吸頂效果。該屬性使用的時候要注意一些細節：
1.固定定位的盒子必須有寬度
也就是必須設置width，如果沒有設置寬度，那么該盒子的寬度就是內容撐開的寬度，如果沒有內容那么會默認為0，從而無法在頁面上看到。由於固定定位一般用於導航欄吸頂效果，所以必須給它設置合適的版心寬度。
並且，如果是通過min-width屬性和max-width屬性設置盒子的寬度，起作用的是min-width。max-width不起作用，除非內容太多，把盒子撐開了。
所以，強調一下，固定定位的盒子，必須有寬度。
2.固定定位的盒子跟父級盒子無關，它是以屏幕為准
看這個例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ margin: 0; } .box{ min-width: 320px; max-width: 540px; height: 2000px; background-color: #aaa; margin: 0 auto; } .fix{ height: 40px; width: 100%; background-color: pink; position: fixed; } </style> </head> <body> <div class="box"> <div class="fix">dfdds</div> </div> </body> </html>
我們可以把父盒子.box設想為版心容器，那么.fix盒子就是我們要吸頂的導航條。
我們已經定義了父盒子box的寬度，而后，給fix盒子的寬度定為width: 100%，意圖就是讓吸頂的盒子寬度與父盒子的寬度相等。
可是我們運行頁面的時候會看到下圖的渲染效果。
如果點擊F12來查看元素，我們會看到fix盒子的寬度是1202，和body的寬度相等，而父盒子box的最大寬度是540px。這就證明了我們的觀點：固定定位的盒子跟父級盒子無關，它是以屏幕為准。
3.如何讓固定定位的盒子，規規矩矩呆在父盒子內部？
有多種方法來實現我們的要求，這里先只給出1種。
給fixed固定定位的盒子設定寬度，這個寬度要跟父盒子寬度一致。千萬不能只給一個width: 100%。比如本例中父盒子box給了min-width和max-width，那么子盒子fix也要給相同的一套min-width和max-width。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ margin: 0; } .box{ min-width: 320px; max-width: 540px; height: 2000px; background-color: #aaa; margin: 0 auto; } .fix{ height: 40px; min-width: 320px; max-width: 540px; width: 100%; background-color: pink; position: fixed; } </style> </head> <body> <div class="box"> <div class="fix"></div> </div> </body> </html>
運行效果如下，完美。
