React组件Position定位导致滚动时图片覆盖Navbar问题咨询

问题描述 #

使用React与Tailwind CSS开发电商项目时，设置div的position为relative/absolute后，滚动页面时Zspeaker组件中的图片会覆盖固定定位的Navbar。

相关组件代码 #

Zspeaker组件 #

import React from "react";
import img from '../../../public/images/home/desktop/image-speaker-zx9.png'
export default function Zspeaker()
{
    return(
<div className=" mx-auto mt-6 bg-orange-400  w-[85%] rounded-xl ">
  <div className=" flex flex-col lg:gap-20 justify-around items-center rounded-xl mx-auto w-[90%]   lg:flex-row lg:px-20">
    <div className=" relative">
    <img className="  w-48 lg:w-64  5" src={img} alt="speaker" />
    </div>
    <div className="items-center flex flex-col lg:items-start text-white py-7">
      <h1 className="text-center text-5xl">ZXP<br></br>Speaker</h1>
      <p className="text-center lg:text-justify  ">Upgrade to premium speakers that are phenomenally built to deliver truly remarkable sound. </p>
    <button className="mt-4 w-1/2 h-11    rounded-xl  bg-black hover:scale-105 ease-in duration-500 lg:w-36 ">
      Shop Now
    </button>
    </div>
  </div>
</div>
    )
}

Navbar组件 #

import React from "react";
import cart from "../assets/images/cart.png"
import { TfiMenu } from "react-icons/tfi";
import { AiOutlineCloseCircle} from "react-icons/ai";
export default function Navbar()
{
const [open,setopen]=React.useState(false)
    let Links =[
        {name:"Home" ,link:"/"},
        {name:"Headphone" ,link:"/"},
        {name:"Speaker" ,link:"earphones"},
        {name:"Earphone"  ,link:"/"},
      
    ]
    const change=()=>{
        setopen(!open)

    }
    return(
    <>
    <div className=" z-5000 fixed shadow-md w-full  top-0 left-0 ">
    <div className="  lg:flex items-center bg-black py-4 md:justify-around">
   <div className=" flex justify-between px-3 pt-2  text-white cursor-pointer font-[Poppins]">audiophile
   <div onClick={change} className=" lg:hidden  w-9 inline-block  ">
    {open ?     <span  className=""><AiOutlineCloseCircle/></span>:    <span  className=""><TfiMenu/></span>}
   </div>
   </div>
   <ul className={`lg:flex md:items-center ${open ?"" :"hidden"}  `}>
    {
        Links.map((link)=>(
            <li className='  my-7  ml-8 text-xl '> 
        <a href={link.link} className='text-white hover:text-yellow-500 duration-500'>{link.name}</a>
        </li>
        ))
        
    }
   </ul>
   <div className>
<img className="absolute right-20   md:inline-block  w-7 cursor- top-5 " src={cart} alt="cart" />
   </div>
   </div>
   </div>
   </>
    )
}

Home组件 #

import React from "react";
import Marktwo from "../Homecomponents/Marktwo";

import Listpage from "../Homecomponents/Listpage";
import Zspeaker from "../Homecomponents/Zspeaker";

export default function Home()
{
    return(
        <div>
     <Marktwo /> 
     <Listpage />
     <Zspeaker />
     <Zspeaker />
     <Zspeaker />
  
     </div>
    )
}

解决方法 #

核心原因 #

Navbar使用了自定义的z-5000类，但Tailwind CSS默认不支持该数值的z-index，导致这个类无法生成有效CSS，Navbar的层级没有高于Zspeaker组件中的图片。

修复步骤 #

1. 替换Navbar的z-index类：将Navbar外层div的z-5000改为Tailwind内置的z-50（默认最高层级类），确保Navbar处于页面上层：

   <div className=" z-50 fixed shadow-md w-full  top-0 left-0 ">
   

2. （可选）明确Zspeaker层级：若修改后仍有问题，给Zspeaker的外层div添加z-0类，确保其层级低于Navbar：

   <div className=" mx-auto mt-6 bg-orange-400  w-[85%] rounded-xl z-0">
   

完成修改后，滚动页面时Navbar就不会被Zspeaker的图片覆盖了。

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