1.子元素 absolute/fixed定位后,子元素脱离文档流存在,它让出原来占的那个坑,父元素再也不能通过子元素来撑开高度了
<style> div{ position:absolute; } </style> <div> <div style="width:100px;height:100px;background-color:red;"> </div> <div style="width:100px;height:100px;background-color:green;"> </div> <div style="width:100px;height:100px;background-color:blue"> </div> </div>
绝对定位之前:
绝对定位之后:
最外层父元素的宽高为0,因为子元素都绝对定位,脱离文档流存在了。而且绿的div向上浮动覆盖红的div,蓝的div向上浮动,覆盖绿的div,这样覆盖到最后,我们只能看到蓝色的div了
2.元素设置position:absolute或者position:fixed后,元素就脱离文档流了,position:relative则还是在文档流中。
元素脱离文档流之后,会一直像冒泡一样往上浮动,直到碰到还是文档流中的元素,那么定位后的脱离文档流的元素就呆在了文档流中元素的下面了
举例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ position: fixed; } </style> </head> <body> <div> <div style="width:100px;height:100px;background-color:red;position:static; "> </div> <div style="width:100px;height:100px;background-color:green;"> </div> <div style="width:100px;height:100px;background-color:blue"> </div> </div> </body> </html>
2.1 position:fixed不能覆盖第一个div的position:static,优先级没有行内样式高
2.2 绿色的div和蓝色的div,定位之后,会向上冒泡,直到碰到static定位的红色div后停止冒泡,绿色冒过之后,蓝色的冒泡,由于蓝色div在绿色div的后面,他会无视脱离文档流的元素,直奔红色div而去,所以看上去就像是没有绿色div样滴。