我們知道如果使用position:absolute和position:fixed都會導致元素脫離文檔流，由此就會產生相應的問題。舉例如下：
<!DOCTYPE html> <html> <head> <title>position</title> <style> .div1{ background-color: red; padding:20px; } .div2{ width: 200px; height: 200px; background-color: blue; } </style> </head> <body> <div class="div1"> <div class="div2"></div> </div> </body> </html>
舉例如下
即子元素將父元素撐了起來。
但是一旦子元素的position為fixed或者是absolute，那么它就會脫離文檔流，這樣的后果是父元素無法被撐開，如下所示：
<!DOCTYPE html> <html> <head> <title>position</title> <style> .div1{ background-color: red; padding:20px; position: relative; } .div2{ position: absolute; // 添加position:absolute使其脫離文檔流 width: 200px; height: 200px; background-color: blue; } </style> </head> <body> <div class="div1"> <div class="div2"></div> </div> </body> </html>
解決方法1：在js中設置父元素高度等於子元素的高度。
解決方法2：給父元素強行設置高度。（對於寬度導致的類似問題就強行設置寬度）