为什么即使一个组件的 z-index 值大于其他目标组件，css z-index 属性也不起作用？

Question

产品组件 z-index 值大于 home-image z-index 值，但 home-image 仍然盖过了产品组件。给定产品，z-index：1，home-image，z-index：-1；它在教程中有效，但在此处无效。

Product.css（这里的z-index值大于home-image的z-index值）

.product{
display: flex;
flex-direction: column;

align-items: center;
justify-content: flex-end;
max-width: 100%; 
margin: 10px;
padding: 20px;
max-height: 400px; 
min-width: 100px;


background-color:white;
z-index: 1;
}

.product__info{
height:100px;
margin-bottom:15px;
}

.product__price{
margin-top:5px;

}

.product__rating  {
display:flex;
color: #FFD700;
font-weight:900;
}

.product > img {
max-height:200px;
width:100%;
object-fit:contain;
margin-bottom:15px;
}

.product > button{
background-color:#f0c14b;
border: 1px solid;
margin-top: 10px;
border-color: #a88734 #9c7e31 #846a29;
color: #111;
}

Home.css（这里的z-index值小于product组件的z-index值）

.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));
}

这里我渲染了 Product 组件 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>
)
}

Answer 1

z-index 正在处理定位元素：https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

因此您可以将 position: relative; 添加到您想要更改 z-index 属性的元素中

为什么即使一个组件的 z-index 值大于其他目标组件，css z-index 属性也不起作用？

Why css z-index property is not working even z-index value of one component is greater than other target component?

html

javascript

css

z-index

reactjs

为什么即使一个组件的 z-index 值大于其他目标组件，css z-index 属性 也不起作用？

Why css z-index property is not working even z-index value of one component is greater than other target component?

html

javascript

css

z-index

reactjs

为什么即使一个组件的 z-index 值大于其他目标组件，css z-index 属性也不起作用？