React导航栏下方图片轮播显示异常问题求助

开发了自动淡入淡出的图片轮播组件，尝试用CSS的z-index属性让轮播显示在导航栏下方并铺满页面，但未生效。

组件代码（React） #

import React from 'react'
import '../Styling/Home.css'
import { useState, useEffect } from 'react'
import img1 from '../Media/containerPic1.jpg'
import img2 from '../Media/containerPic2.jpg'
import img3 from '../Media/ContainerPic3.jpg'
import { NavLink } from 'react-router-dom'
import logo from '../Media/anamehani-logo-ar.png'

function Home() {
    const images=[ img1, img2, img3];
    const[CurrentImageIndex, setCurretImageIndex]= useState(0);

    useEffect(() =>{
        const interval= setInterval(()=>{
            setCurretImageIndex((prevIndex)=>(prevIndex+1) % images.length);
        },3000);
        return()=>{
            clearInterval(interval);
        }
    }, [images]);
    
    return (
        <>
            <div className='Header'>
                <NavLink to="/"><img src={logo} className='logo-img'  alt='logo'/></NavLink>  
                <NavLink className="nav-link" activeclassname="nav-link-active" to="/"> <h2> الرئيسية</h2>  </NavLink>
                <NavLink className="nav-link" activeclassname="nav-link-active" to="/home2"> <h2> خدمات</h2>  </NavLink>
                <NavLink className="nav-link" activeclassname="nav-link-active" to="/"> <h2> اعلانات</h2>  </NavLink>
                <NavLink className="nav-link" activeclassname="nav-link-active" to="/"> <h2> الصفقات</h2>  </NavLink>
                <NavLink className="nav-link" activeclassname="nav-link-active" to="/"> <h2> تواصل معنا</h2>  </NavLink>
                <NavLink className="nav-link" activeclassname="nav-link-active" to="/"> <h2> تسجيل الدخول</h2>  </NavLink>
                <NavLink  to="/"> <button className="create-btn"> انشاء حساب</button> </NavLink>
            </div>
            <div className='container'>
                {images.map((image, index)=>(
                    <img
                        key={index}
                        src={image}
                        alt={'Image'+ (index+1)} 
                        className={'car-image' +(index === CurrentImageIndex ? ' active' :'')}
                    />
                ))}
            </div>
        </>
    )
}
export default Home

CSS代码 #

.Header {
    display: flex ;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    direction: rtl;
    width: auto;
    padding-top: 12px;
    z-index: 2;
}
.nav-link{
    display: inline-block;
    color: rgba(0,0,0,.5);;
    font-size: 11px;
    text-decoration: none;
    padding: 10px 36px;
    font-family: 'Courier New', Courier, monospace;
    flex-wrap: wrap;
    z-index: 2;
}
.logo-img{
    width: 140px;
    height: 50px;
    margin-left: 100px ;
    margin-right: 100px;
    margin-top: 16px;
}
.create-btn{
    padding: 8px 16px;
    background-color: #f8af39;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    font-weight: 900;
    border-radius: 10px;
    border: none;
    margin-right: 100px;
}
.container{
    width: 100%;
    height: 678px;
    overflow: hidden;
    position: relative;
    z-index: -1;
}
.car-image{
    width: 100%;
    height: 100%;
    object-fit:cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0,5 ease;
}
.car-image .active{
    opacity: 1;
}

解决方法 #

1. 修复z-index不生效问题 #

z-index仅对非static定位的元素生效，当前.Header默认是static定位，z-index:2不会起作用。给.Header添加定位属性：

.Header {
    /* 保留原有属性 */
    position: relative;
    background-color: #fff; /* 可选：添加背景色，避免轮播图透过导航栏显示 */
}

2. 修复轮播图显示类的选择器错误 #

CSS中.car-image .active是后代选择器，实际active是和car-image并列的类名，需改为：

.car-image.active {
    opacity: 1;
}

同时React代码中拼接类名时，active前要加空格，避免生成无效类名（如car-imageactive）：

className={'car-image' +(index === CurrentImageIndex ? ' active' :'')}

3. 修复过渡动画语法错误 #

transition: opacity 0,5 ease中的逗号是中文格式，改为英文逗号并补充时间单位：

.car-image{
    /* 保留原有属性 */
    transition: opacity 0.5s ease;
}

4. 可选：调整布局避免重叠 #

如果导航栏高度导致轮播图向上偏移，可给.container添加margin-top，或设置.Header为fixed固定在顶部。

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