为何设置position:absolute的div元素宽度会突然变为0？

现象原因 #

• 普通文档流里的块级元素<div>默认遵循块级元素渲染规则：宽度默认占满父元素（这里父元素是<body>）的100%可用宽度，所以哪怕没有内容，也会因为有默认宽度和设置的高度、背景色显示出来。
• 当给元素设置position: absolute后，元素脱离正常文档流，宽度渲染规则发生变化：无显式width声明的绝对定位元素，宽度由内部内容的实际宽度决定。你提供的代码里<div>内部没有任何文本、子元素等内容，所以宽度自动计算为0，视觉上就表现为元素消失。

解决方法 #

如果要保留绝对定位同时让元素正常显示，可选择以下任意一种操作：

• 给div显式设置宽度，比如添加width: 100%或者指定固定宽度值
• 给div内部添加文本、子元素等任意内容
• 若需要让元素吸附在底部且撑满屏幕宽度，补充width: 100%即可，修改后的样式示例：

div{
  height: 100px; 
  background-color: red; 
  position: absolute;
  bottom: 0;
  width: 100%;
}

内容的提问来源于stack exchange，提问作者Bilal Sheikh