記一個比較有意思的bug，position絕對定位問題
阿新 • • 發佈：2019-01-25
剛剛結束的專案裡有一個很有意思的bug，我們常用如圖這樣的方式進行側邊欄的收縮隱藏和展示，右邊的小按鈕會是一個absolute的絕對定位，right定為負值
程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } .parent-box{ width:150px; height而如果給父元素加一個overflow屬性，就會出現問題:600px; border:1px solid gray; position:relative; } .children-box{ width:20px; height:40px; border:1px solid gray; position:absolute; top:50%; margin-top:-20px; right:-22px; } </style> </head> <body> <div class="parent-box"> <div class="children-box"></div> </div> </body> </html>
問題程式碼和圖片如下：只是給parent-box加了一個overflow:auto;（因為專案的內容展示裡涉及內容過多出現滾動條所以寫這裡的人加了一個overflow）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } .parent-box{ width:150px; height:600px; border:1px solid gray; position:relative; overflow:auto; } .children-box{ width:20px; height:40px; border:1px solid gray; position:absolute; top:50%; margin-top:-20px; right:-22px; } </style> </head> <body> <div class="parent-box"> <div class="children-box"></div> </div> </body> </html>
當我們要在這裡加一個收起的小按鈕的時候我按照正常思路寫完發現佈局完全不對，很疑惑，最終發現是overflow的問題的時候覺得很有意思就記錄一下