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

Question

这个问题在这里已经有了答案:





Why can't an element with a z-index value cover its child?

(4 个回答)



Why does z-index not work?

(5 个回答)


5 个月前关闭。




产品组件 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值小于产品组件的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));
}

这里我在 Home.js 中渲染了 Product 组件

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 属性的元素