關於position：fixed的注意點
阿新 • • 發佈：2020-07-30
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>
執行效果如下，完美。