我们知道如果使用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：给父元素强行设置高度。（对于宽度导致的类似问题就强行设置宽度）