最近寫實驗室的門戶網站，想要實現大屏狀態下鼠標經過下拉框顯現（不占有位置），小屏時因為導航欄豎着顯示，為了觀看方便，想要下拉框占據位置，即會把下面的導航欄往下“推”。想要實現的效果如下圖所示
結果不知為何這兩個狀態下導航欄都是不占有位置的狀態，如下圖所示
后來發現是由於給用來實現導航欄的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>
結果：
可以看出，溢出的盒子是不會把下面的盒子“頂”下去的