導航欄下拉選單會遮住下面導航欄的解決辦法
阿新 • • 發佈：2020-11-04
最近寫實驗室的入口網站，想要實現大屏狀態下滑鼠經過下拉框顯現（不佔有位置），小屏時因為導航欄豎著顯示，為了觀看方便，想要下拉框佔據位置，即會把下面的導航欄往下“推”。想要實現的效果如下圖所示
結果不知為何這兩個狀態下導航欄都是不佔有位置的狀態，如下圖所示
後來發現是由於給用來實現導航欄的li設定了一個寬度
改為以下情況即可實現所想功能
這就不禁讓我開始思考一個問題：是否對於一個固定寬高的盒子，如果裡面的東西超出了其所能容納的範圍，會不會超出的部分不佔據位置？？
遂用以下程式碼來做實驗
<!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> .box { width: 800px; height: 200px; border: 1px solid pink; } .box1 { height: 300px; background: pink; }</style> </head> <body> <div class="box"> <div class="box1"></div> </div> <div class="box"></div> </body> </html>
結果：
可以看出，溢位的盒子是不會把下面的盒子“頂”下去的