Next.js项目Tailwind CSS flex-col-reverse不生效 小屏文本区块不显示问题

问题根因 #

1. Image 组件使用layout="fill"时会默认基于最近的position: relative父元素（也就是外层<article>）绝对定位，直接覆盖整个容器区域，完全无视flex的排列规则，小屏时直接盖住了下层的文本内容
2. 小屏状态下文本颜色为白色，默认页面背景也是白色，就算层级没问题文本也会和背景融合看不见
3. 存放图片的div没有设置宽高，本身高度为0，flex布局中无法正常占据位置

修复后的代码 #

import React from 'react'
import Image from 'next/image'
import catImage from '../assets/catImage.webp'

const LargeCard = () => {
  return (
    <article className='flex flex-col-reverse h-screen py-16 lg:relative lg:h-96' >
      <div className='relative h-96 w-full lg:absolute lg:inset-0'>
        <Image src={catImage} 
          layout='fill'
          objectFit='cover'
          className='rounded-2xl'      
          alt="cat"
        />
      </div>
      <div className='lg:absolute lg:top-32 lg:left-12 mb-6 lg:mb-0' >
        <h2 className='text-gray-900 lg:text-white text-4xl font-semibold mb-3 w-64' >Cat Ipsum</h2>
        <p className='text-lg lg:w-[300px] text-gray-700 lg:text-white' >Stretch out on bed i heard this rumor where the humans are our owners, pfft, what do they know?!</p>
        <button className='bg-gray-100 text-gray-900 px-4 py-2 rounded-lg mt-5 max-w-md ' >Learn more</button>
      </div>
    </article>
  )
}

export default LargeCard

关键修改说明 #

• 外层article只在大屏下保留relative属性，小屏取消，避免Image全局填充
• 图片容器新增relative h-96 w-full，小屏时作为Image的定位父容器，自身占据固定高度，大屏下设为absolute inset-0占满整个article区域
• 文本内容小屏改为深色字体，避免和白色背景融合，取消固定高度自适应内容高度，大屏保留白色字体和绝对定位配置
• 新增Image的alt属性，符合可访问性规范

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