Search code examples
javascripthtmlcssreactjsz-index

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

The product component z-index value is greater than home-image z-index value but still home-image overshadows the product component. Given product, z-index: 1, home-image, z-index:-1; Its working in the tutorial but not here. The image shows how home image over shadows the product component

Product.css (Here z-index value is greater than home-image z-index value)

.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 (Here the z-index value is smaller than z-index value of product component)

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

Here I rendered the Product component in 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>
)
}
Solution

  • z-index is working on positioned elements : https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

    So you could add position: relative; to your elements you want to change z-index prop