移动端flex column布局下图片与文字重叠问题求助

问题根源分析 #

从代码和截图来看，重叠问题核心原因有两个：

• ul元素上的ab是无效类名，大概率是absolute的误写，绝对定位会让元素脱离文档流，直接覆盖在其他元素上
• 即便设置了flex-col，脱离文档流的元素不受flex布局约束，自然会和图片重叠

修正后的代码 #

function Project({ title, image }) {
  return (
    <div className="bg-[#ffffff] py-5 rounded-lg my-10 shadow-2xl py-10">
      <h2 className="text-2xl px-5 font-semibold">{title}</h2>
      <div className="flex flex-col md:flex-row justify-between">
        <div className="w-full md:w-auto">
          <img src={image} alt="" className="w-full p-5 drop-shadow-lg" />
        </div>
        <div className="w-full md:w-auto">
          <ul className="py-10 px-5">
            <li> asdasd</li>
            <li> asdasd</li>
            <li> asdassssssssssssssssssssssd</li>
            <li> asdasd</li>
            <li> asdasd</li>
            <li> asdasd</li>
            <li> asdasd</li>
            <li> asdasd</li>
            <li> asdasd</li>
          </ul>
        </div>
      </div>
    </div>
  )
}

export default Project;

关键修改说明 #

• 移除ul上的ab无效类，让元素回归文档流，受flex布局约束
• 给图片、文字容器添加w-full md:w-auto，确保移动端元素占满宽度，避免溢出或错位
• 移除父元素不必要的relative属性（无绝对定位子元素时，该属性只会增加定位复杂度）
• 调整flex类顺序（flex-col放在md:flex-row前，符合Tailwind响应式优先级规范）
• 去掉冗余的z-index设置，正常文档流元素不会出现层级覆盖问题

如果需要保持元素上下分布，justify-between在flex-col布局下会让图片和文字分别靠顶部、底部排列，只要子元素都在文档流内，就不会重叠。

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