Even though the z-index value of the product component is higher than that of the home-image, the home-image still dominates and overshadows the product component. In this specific scenario, the product has a z-index of 1 while the home-image has a z-index of -1.
https://i.sstatic.net/gXEYx.pngIn the tutorial, everything seems to be working fine with the z-index values, but in this case, it's not behaving as expected.
Product.css (product component 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 (home-image z-index < product component 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));
}
The Product component is rendered 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>
)
}