title: Why css z-index property is not working even z-index value of one component is greater than other target component?
body: <p>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.
  <a href="https://i.stack.imgur.com/gXEYx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gXEYx.png" alt="The image shows how home image over shadows the product component" /></a></p>
  <p>Product.css (Here z-index value is greater than home-image z-index value)</p>
  <pre><code>.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 &gt; img {
  max-height:200px;
  width:100%;
  object-fit:contain;
  margin-bottom:15px;
  }
  
  .product &gt; button{
  background-color:#f0c14b;
  border: 1px solid;
  margin-top: 10px;
  border-color: #a88734 #9c7e31 #846a29;
  color: #111;
  }
  </code></pre>
  <p>Home.css (Here the z-index value is smaller than z-index value of product component)</p>
  <pre><code>.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));
  }
  </code></pre>
  <p>Here I rendered the Product component in Home.js</p>
  <pre><code>import React from 'react';
  import './Home.css';
  import Product from './Product.js';
  
  const Home = () =&gt; {
  return (
      &lt;div className='home'&gt;
  
          &lt;div className='home__container'&gt;
  
              &lt;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'/&gt;
  
                 &lt;div className='home___row'&gt;
  
                   &lt;Product/&gt;
                   &lt;Product/&gt;
  
                  &lt;/div&gt;
                  &lt;div className='home___row'&gt;
  
                      {/* &lt;Product/&gt; */}
                      {/* &lt;Product/&gt; */}
                      {/* &lt;Product/&gt; */}
                  &lt;/div&gt;
                  &lt;div className='home___row'&gt;
  
                   {/* &lt;Product/&gt; */}
                  &lt;/div&gt;
          &lt;/div&gt;      
      &lt;/div&gt;
  )
  }
  </code></pre>