列布局图片定位问题：CSS设置absolute后无法将左栏图片放在右下角

你使用绝对定位无法右对齐的核心原因是绝对定位元素需要对应有非static定位的父元素作为定位参照，你当前没有给.staff的父容器.text设置定位属性，因此.staff的定位基准是页面根元素，自然无法匹配左栏的宽度做右对齐。

下面提供两种可行实现方案： #

方案1：保留绝对定位实现（适合需要图片脱离常规文档流的场景） #

第一步：给父容器添加相对定位 #

修改.text的CSS规则，添加position: relative，同时增加底部内边距预留图片展示空间，避免图片覆盖其他内容：

.text {
  font-size: 25px;
  position: relative;
  padding-bottom: 240px; /* 数值略大于图片高度225px即可 */
}

第二步：给图片容器添加对齐属性 #

修改.staff的CSS规则，添加右对齐和底部对齐属性：

.staff {
  position: absolute;
  right: 0; /* 相对于父容器右边缘对齐 */
  bottom: 0; /* 相对于父容器底边缘对齐 */
}

方案2：无需定位的更简单实现（推荐，适配性更强） #

如果不需要图片脱离文档流，直接删除.staff的position: absolute属性，添加margin-left: auto即可实现块级元素右对齐：

.staff {
  margin-left: auto;
  width: fit-content; /* 适配图片宽度，保证对齐生效 */
}

这种方案不需要修改父容器样式，也不会出现元素重叠的问题，更适合常规布局场景。

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