如何让事件列表缩略图上的<span>元素互不重叠？

算力阿峰

2026-8-16

解决缩略图上元素重叠的问题

问题根源

.date-img 使用了 position: absolute，但它的父容器未设置相对定位，导致所有该类元素都以同一个上层定位元素（或文档）为基准定位，最终出现重叠。

解决步骤

1. 为父容器添加相对定位

给 .date-img 的直接父元素设置相对定位，让绝对定位的日期元素以各自的父容器为参考基准：

/* 让列表项作为.date-img的定位容器 */
.clearfix.span12 {
    position: relative;
}

如果希望日期仅相对于图片容器定位，也可以给图片外层容器添加：

.rsepro-image {
    position: relative;
}

2. 微调日期元素的定位（可选）

若选择以图片容器为定位基准，可调整 .date-img 的位置参数，让它更好地贴合图片：

.date-img {
    text-transform: uppercase;
    font-weight: bolder;
    color: #054a8f;
    position: absolute;
    z-index: 2;
    left: 5px;
    bottom: 5px; /* 改用bottom让日期固定在图片底部 */
    line-height: 1;
    font-size: 25px;
    margin-top: 5px;
}