【記錄】float:right和position:absolute的問題
記錄一下網頁開發過程中遇到的奇奇怪怪的問題及解決方法。
目標是做一個側邊導航,導航頁面預設不顯示,當滑鼠懸停在側邊導航欄上時彈出。
左右兩邊都有,於是用了float,問題出現了:左邊的導航執行正常,右邊的卻會在彈出時向右出現從而超出頁面寬度,出現橫向滾動條。
之前的寫法是nav-container向右浮動,nav-right和nav-right-hide絕對定位後向右浮動
解決辦法:在nav-right的樣式裡新增:right:0;
這樣就好了
圖如下:
預設側邊導航欄:
滑鼠懸停後的理想效果:
錯誤懸停效果,向右出現,超出頁面寬度: