CSS设置position:absolute后图片无法对齐到banner容器底部如何解决？

position: absolute 定位的元素会相对于最近一个设置了非static定位属性的父级容器 进行位置计算。你当前的.banner容器默认是position: static定位，所以内部图片会直接以整个页面视口作为定位参照，才会出现对齐到视口底部、而非banner容器底部的问题。

仅需要给.banner 选择器新增position: relative属性，将其设置为内部绝对定位元素的定位上下文即可，修改后的.banner样式代码如下：

.banner{
width: 100%;
height: 90vh;
background-color: chocolate;
overflow: hidden;
/* 新增以下这行代码 */
position: relative;
}

其余代码无需修改，调整后图片就会正常对齐到banner容器的底部。

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