React组件间布局重叠问题排查与解决求助

问题根源 #

你的Service组件里，外层容器高度仅由固定500px的背景图div决定，而内部的内容区域使用了absolute定位——绝对定位元素会脱离文档流，不会撑开外层容器。后续组件会基于外层容器的500px高度进行布局，导致和Service组件内超出500px的内容重叠。

修复方案 #

改用Grid布局实现背景与内容的层叠，同时让内容撑开组件高度，确保后续组件能正常排在下方：

import React from 'react';
import ServiceItem from '../components/ServiceItem';
import { services } from '../utils/services';
import { SERVICE_BG_IMG } from '../config/constants';

function Service() {
    return (
        <div className='w-full grid'>
            {/* 背景层：设置最小高度保证基础显示 */}
            <div className='w-full bg-cover bg-center min-h-[500px] col-start-1 row-start-1' style={{ backgroundImage: `url(${SERVICE_BG_IMG})` }}>
                <div className="absolute inset-0 bg-custom-blue opacity-80"></div>
            </div>
            {/* 内容层：与背景层叠，同时撑开组件高度 */}
            <div className='col-start-1 row-start-1 relative top-20 w-full pb-10'>
                <div className='w-full flex justify-center items-center px-3'>
                    <h1 className='text-center text-3xl md:text-4xl lg:text-5xl text-white font-semibold'>Our most popular <br /> <span className='text-custom-green'>services for you</span></h1>
                </div>
                <div className='w-full flex justify-center mt-10'>
                    <div className='w-5/6 grid grid-cols-1 place-items-center gap-8 md:grid-cols-2 lg:grid-cols-3'>
                        {services.slice(0, 8).map((item) => (
                            <ServiceItem key={item.title} title={item.title} description={item.description} url={item.url} redirect_path={item.redirect_path} />
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Service;

修改说明 #

• 外层容器使用grid布局，让背景层和内容层共享同一网格位置，实现视觉上的层叠效果
• 背景层设置min-h-[500px]，保证即使内容较少时也有足够的显示高度
• 内容层移除absolute定位，改用relative调整顶部偏移，同时添加pb-10（底部内边距）避免内容紧贴组件底部
• 组件高度由内容层的实际高度决定，后续组件会自动跟随在Service组件下方，不会再出现重叠

内容的提问来源于stack exchange，提问作者amit-kandar