CSS中#cf img样式导致图片下方文字无法对齐的问题如何解决？

问题原因 #

你为#cf img设置了position: absolute属性，绝对定位的元素会脱离正常文档流，父容器#cf不会计算这类元素的高度，因此默认状态下#cf高度为0，容器内的<p>标签会直接渲染在高度为0的父容器下方，视觉上就会和上方重叠的图片重合，无法对齐到图片底部。

解决方案 #

优先推荐调整DOM结构+给父容器加定位属性的方案，不影响现有图片淡入淡出的过渡效果：

1. 调整HTML结构，将文字段落移出图片容器#cf：

<div id="cf">
  <img class="bottom" src="/Images/t-shirtclose.png"  alt="sometext" style="width:400px;height:420px" />
  <img class="top" src="/Images/T-shirt.png"  alt="sometext" style="width:400px;height:420px" />
</div>
<p>Some text</p>

2. 为父容器#cf新增以下CSS规则，主动撑开容器高度：

#cf {
  /* 子元素是绝对定位，父容器需设相对定位作为定位参照 */
  position: relative;
  /* 高度和宽度和内部图片保持一致 */
  height: 420px;
  width: 400px;
  margin: 0 auto;
}

如果需要将段落保留在#cf内部，可额外为段落添加偏移规则：

#cf p {
  position: relative;
  /* 偏移值等于图片高度，可根据需要调整间距 */
  top: 420px;
  margin: 10px 0 0 0;
  text-align: center;
}

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