What could be causing the z-index property in CSS to fail, despite the fact that one component has a higher z-index value than the other target

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.png

In 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>
)
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Utilizing CSS to Format Academic Publications in the Style of APA Guidelines

Is there a way to automatically format a list of academic papers for an updated page using CSS rules? I want to style published articles similar to the following example: https://i.stack.imgur.com/jO56V.png I don't want to manually enter &nbsp;& ...

Obtaining JSON data through AJAX requests from different domains may result in receiving a JSON string format

I have encountered an issue with my cross-domain AJAX call. It seems that instead of receiving a JSON object as expected, I am getting a string from the API provider. Here is the code snippet for my AJAX request. $.ajax({ async: false, ...

Disappearing modal in Bootstrap 5 does not eliminate the backdrop

When using Bootstrap 5, I create my modal like this: var myModal = new bootstrap.Modal(document.getElementById('scheduleMeetingModal'), { backdrop: 'static' }); myModal.show(); Later on, when I want to hide the modal in another fun ...

Rotating the icon in Bootstrap Accordion upon opening

I am trying to customize a Bootstrap 4 accordion by conditional rotating the icon to point up when it is open and back down when closed. I managed to achieve this using CSS, but now I need to implement it conditionally based on active states rather than ev ...

Is there a way to verify the presence of months in a column related to departments?

Is there a way to validate whether the current row aligns with the current column month and year? If not, can it be set to 0. Let's consider the current dataset. Presenting my resultData https://pastebin.com/GHY2azzF I want to verify if this data ...

What is the best way to send information from one screen to a flatlist in React Navigation?

Currently, I am retrieving data from an API in the form of a JSON file. My goal is to pass this data from the main app to the appStack and then to the sessionsStack before displaying it on the home page. However, my console logs indicate that the data only ...

Adjust the horizontal background-position transition for color change while scrolling using jQuery and CSS

I came across a fascinating website - - where the background-position changes on scroll() from a linear gradient with two colors to smoothly slide one color off the screen. While I grasped how they achieved the split colors using linear-gradient, I'm ...

Ways to evaluate a value in JavaScript

After performing an ajax operation to retrieve data, I am using javascript to perform conditional checks. Here is the output when printing the response: document.write(response) Result: [object Object] When printing something like document.write(JSON.s ...

Node.js setInterval is a method used to repeatedly execute a function

I have a code snippet for an http request that is supposed to run every one minute. However, I am encountering an issue with the following error: "Error: listen EADDRINUSE". Here is my current code: var express = require("express"); var app = express(); v ...

CORB prevented the loading of a cross-origin response

I'm encountering an issue where I am not receiving a response from an API call using Angular 4 service. However, the same call is working in the browser. The error message that I am facing is: Cross-Origin Read Blocking (CORB) blocked cross-origin res ...

Modifying webpage design using JavaScript for styling

Is there a way to change the css style(defined in the page source) dynamically with Java? I know it is possible to do it with JavaScript. If there isn't, are there other situations where JavaScript is the only choice developing a web app? ...

simulating interaction with databases within API routes

I am currently working on developing a full stack application using NextJS along with a MySQL database. Within my API routes, I interact with this database by making calls to various functions such as createOne(), which is responsible for creating new inst ...

Just updated to Angular 10, encountered issue: Unable to modify the read-only property 'listName' of an object

After updating my Angular project from version 8 to version 10, I encountered an error while trying to edit an input field in a Material Dialog. The error message displayed is as follows: ERROR TypeError: Cannot assign to read only property 'listName& ...

What is the best way to incorporate a dropdown header in Material-UI on a React project?

I am facing an issue where only the last Menu Dropdown is rendering, but I actually need different Menus to be displayed (with the text faintly appearing behind them). I am uncertain about how to correctly pass the props/state to make this work. import Rea ...

Creating a new list by grouping elements from an existing list

I have successfully received data from my API in the following format: [ {grade: "Grade A", id: 1, ifsGrade: "A1XX", ifsType: "01XX", points: 22, type: "Type_1"}, {grade: "Grade B", id: 2, ifsGrade: &quo ...

Creating a grid pattern of boxes within a rectangle using CSS

I'm attempting to design a rectangle filled with colorful boxes Here is the code I'm using: <div class="col-md-3" > <div id="myViewport" style="height: 700px; width: 50px; padding: 10px; border: 5px solid gray; margin: 0;"> ...

What's the best way to showcase certain data from a JSON object in a structured table format?

{"symbol":"DRREDDY","series":"EQ","openPrice":"3,132.00","highPrice":"3,229.90","lowPrice":"3,132.00","ltp":"3,206.35","previousPrice":"3,153.25","netPrice":"1.68","tradedQuantity":"74,165","turnoverInLakhs":"2,379.33","lastCorpAnnouncementDate":"18-Jul-20 ...

What is the process for executing a GraphQL mutation query with the useSWR hook?

My MongoDB database is hosted in MongoDB Atlas, and I am utilizing MongoDB Atlas RealM to create GraphQL schemas. In my React JS application built with Next JS, I am consuming the GraphQL API. While fetching data using the useSWR hooks works fine, I am f ...

Use jQuery to retrieve the number of items that have been selected in an ASP ListBox

Struggling to find a way to calculate the count of selected items from an ASP listbox using jQuery. Currently, encountering an issue where I am receiving "Cannot get property length of undefined or null reference" on the selectedOptions property. The var l ...

Merge JSON object information into tables, including column headings

I am currently facing a challenge in loading multiple JSON files into tables within different divs. Here is the structure of my JSON data: JSON file 1: [ { "id": 12345, "code": "final", "error": "", "data": [ ...