Javascript 为什么即使一个组件的z索引值大于另一个目标组件的z索引值，css z索引属性也不起作用？

产品组件z索引值大于主图像z索引值，但主图像仍会遮挡产品组件。 给定产品，z指数：1，家庭图像，z指数：-1； 它在教程中起作用，但在这里不起作用。

Product.css（此处z索引值大于主图像z索引值）

Home.css（此处z索引值小于产品组件的z索引值）

在这里，我在Home.js中呈现了产品组件

import React from 'react';
import './Home.css';
import Product from './Product.js';

const Home = () => {
return (
    <div className='home'>

        <div className='home__container'>

            <img className='home__image' 
 src='https://images-eu.ssl-images- 
 amazon.com/images/G/02/digital/video
/merch2016/Hero/Covid19/Generic/GWBleedingHero
_ENG_COVIDUPDATE__XSite_1500x600_PV_en-GB.
_CB428684220_.jpg'
                 alt='amazon-prime'/>

               <div className='home___row'>

                 <Product/>
                 <Product/>

                </div>
                <div className='home___row'>

                    {/* <Product/> */}
                    {/* <Product/> */}
                    {/* <Product/> */}
                </div>
                <div className='home___row'>

                 {/* <Product/> */}
                </div>
        </div>      
    </div>
)
}

从“React”导入React；
导入“/Home.css”；
从“./Product.js”导入产品；
常量Home=（）=>{
返回(
{/*  */}
{/*  */}
{/*  */}
{/*  */}
)
}

z-index

正在定位元素上工作：

---

因此，您可以添加

位置：relative

要更改z-index prop的元素

是否可以为此创建

code沙盒

？这将更容易得到帮助。这个问题对我来说不是小事。你可以在youtube上查看聪明的程序员亚马逊克隆视频，我用它反检查了我的代码，但它仍然不起作用。你可以跳到1:17:55，他的代码在那里工作。我相信你说的教程代码工作：D我想调试你的案例，你找到什么了吗？它工作了，但在教程中他没有给元素任何位置，它仍然工作

.home{
display:flex;
justify-content:center;
margin-left:auto;
margin-right:auto;
max-width:100%; 

}

.home__row{
display:flex;
z-index: 1;
margin-left:5px;
margin-right:5px;
}


.home__image{
width:100%;
z-index: -1;
margin-bottom:-150px;
mask-image: linear-gradient(to bottom, rgba(0,0,0,1),
           rgba(0,0,0,0));
}

import React from 'react';
import './Home.css';
import Product from './Product.js';

const Home = () => {
return (
    <div className='home'>

        <div className='home__container'>

            <img className='home__image' 
 src='https://images-eu.ssl-images- 
 amazon.com/images/G/02/digital/video
/merch2016/Hero/Covid19/Generic/GWBleedingHero
_ENG_COVIDUPDATE__XSite_1500x600_PV_en-GB.
_CB428684220_.jpg'
                 alt='amazon-prime'/>

               <div className='home___row'>

                 <Product/>
                 <Product/>

                </div>
                <div className='home___row'>

                    {/* <Product/> */}
                    {/* <Product/> */}
                    {/* <Product/> */}
                </div>
                <div className='home___row'>

                 {/* <Product/> */}
                </div>
        </div>      
    </div>
)
}