设置Position: Absolute后背景色无法占满100%宽度的问题

问题原因 #

你给.left-side p设置position: absolute; left: 50%; width: 100%;的时候，绝对定位元素的定位参考是最近的非static定位祖先元素（要是没有的话就以浏览器视口为参考）。设置left: 50%会让元素的左边缘对齐参考容器的水平中点，再加上width: 100%，元素的宽度是参考容器的100%，这就导致元素从参考容器的中点开始向右延伸整个容器宽度，左边自然空出一半，视觉上背景色就没法铺满页面宽度了。

解决方法 #

方法1：把left改成0，保留width:100% #

如果不需要基于中点定位，直接让元素从参考容器的左边缘开始，设置left:0就能让width:100%的元素铺满整个参考容器宽度：

.left-side p {
  position: absolute;
  left: 0; /* 把50%改成0 */
  top: 95%;
  width: 100%;
  background-color: black;
}

方法2：用left和right同时固定，不用设置width #

绝对定位元素同时设置left:0和right:0时，会自动拉伸到参考容器的左右边缘，不用额外设置width，写法更简洁：

.left-side p {
  position: absolute;
  left: 0;
  right: 0; /* 添加这行 */
  top: 95%;
  background-color: black;
}

额外提醒 #

如果.left-side元素本身设置了position: relative（或者其他非static的定位属性），那上面的设置会让元素铺满.left-side的宽度；要是.left-side没设置定位，元素就会以浏览器视口为参考，铺满整个页面宽度。

内容的提问来源于stack exchange，提问作者Christopher O