React中无法将Banner背景图置于导航组件后方的问题求助

我在React中有两个组件：绿色导航组件（nav）和带红色边框的Banner组件。目前Banner组件的CSS样式如下：

.banner {
    margin-top: 0;
    background-image: url("../../assets/img/banner/banner-bg.png");
    padding: 260px 0 100px 0;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    border: red 2px solid;
}

当前效果：

期望效果：

需要实现Banner背景图显示在导航组件后方的效果。

要实现Banner背景图在导航后方的效果，核心是调整元素层级和布局，以下是两种实用方法：

方法1：负margin+层级控制 #

1. 给导航组件设置更高层级，确保它能覆盖Banner：

.nav {
    position: relative; /* 必须设置定位才能让z-index生效 */
    z-index: 10;
    /* 保留导航原有样式，比如绿色背景等 */
}

2. 调整Banner的margin-top为负值，让它向上偏移到导航下方，同时保持层级低于导航：

.banner {
    margin-top: -[导航实际高度]; /* 替换成你的导航高度，比如-80px */
    background-image: url("../../assets/img/banner/banner-bg.png");
    padding: 260px 0 100px 0;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    border: red 2px solid;
    position: relative;
    z-index: 1;
}

方法2：独立背景容器 #

如果不想用负margin，可以把Banner的背景图抽离成独立容器，单独控制层级：

1. 创建背景容器的样式：

.banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 460px; /* 对应Banner的总高度：260px+100px内边距+内容高度 */
    background-image: url("../../assets/img/banner/banner-bg.png");
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}

2. 调整页面结构：

<div className="page-container" style={{position: 'relative'}}>
    <div className="banner-bg"></div>
    <NavComponent /> {/* 导航组件，z-index设为10 */}
    <BannerComponent className="banner">
        {/* Banner内容区，设置层级确保在背景图上方 */}
        <div style={{position: 'relative', zIndex: 2}}>
            {/* 你的Banner内容 */}
        </div>
    </BannerComponent>
</div>

3. 修改Banner原有样式，移除背景图并设置透明背景：

.banner {
    margin-top: 0;
    padding: 260px 0 100px 0;
    border: red 2px solid;
    background-color: transparent;
}

注意事项 #

• z-index仅对设置了position（relative/absolute/fixed/sticky）的元素生效，务必给相关元素加上定位属性。
• 使用负margin时，数值要和导航实际高度完全匹配，避免偏移错误。
• 采用绝对定位背景容器时，父容器需设置position: relative，防止背景容器脱离文档流后溢出页面。

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