如何将子元素盒子对齐到父级容器的右下角并正常显示

原有代码问题说明 #

• 子盒子定位类型错误：要相对于设置了position: relative的父容器对齐，子盒子需要使用position: absolute，relative是相对于自身原有位置偏移，无法基于父容器边缘定位。
• 偏移参数错误：bottom: 100%会让子盒子整体偏移到父容器上方，right: 100%会让子盒子整体偏移到父容器左侧，这是看不到子盒子的核心原因。
• 代码存在笔误：HTML中<li>的属性错写为clas，正确为class；CSS中定义的.list-item选择器和li上实际标注的my-item类名不匹配。

修改后完整代码 #

CSS代码 #

.my-container {
  border: 1px solid blue;
  height: 150px;
  position: relative;
}

.my-list {
  border: 1px solid red;
  width: 200px;
  /* 改相对定位为绝对定位，基于父容器定位 */
  position: absolute;
  /* 距离父容器底部0，距离父容器右侧0，自然对齐右下角 */
  bottom: 0;
  right: 0;
  /* 可选：清除ul默认边距避免偏移 */
  margin: 0;
}

.my-item {
  text-align: center;
}

HTML代码 #

<div class="my-container">
  <ul class="my-list">
    <li class="my-item veg">Carrot</li>
    <li class="my-item veg">Beetroot</li>
    <li class="my-item meat">Fish</li>
    <li class="my-item meat">Crab</li>
  </ul>
</div>

调整后红色子列表会完整展示在蓝色父容器的右下角，符合需求。

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