I am having an issue with the Z-index in my component-based React app. I currently have a list component that contains items, and I want to adjust the CSS scale and z-index to display one item in front of the others.
The problem arises when the hovered item is displayed on top of the other items in the same list, as well as on top of List Headlines (classic HTML elements, not React components). Unfortunately, the z-index does not work for the other lists.
Item Component
<div className={isHovered ? 'sliderItem active' : 'sliderItem'} onMouseEnter={handleHover} onMouseLeave={handleHoverEnd}>
<div className="sliderItemThumbnail">
<SliderHoverLoader isHovered={isHoveredLoader}></SliderHoverLoader>
{props.backDrop ? <img src={`https://image.tmdb.org/t/p/original${props.backDrop}`} alt="" /> : <img src="https://www.kindpng.com/picc/m/18-189751_movie-placeholder-hd-png-download.png" alt="" />}
{trailer !== '' ?
<iframe src={`https://www.youtube-nocookie.com/embed/${trailer}?autoplay=1&mute=1`} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
: ''}
</div>
</div>List Component
<div>
<SliderIndicator sliderIndex={sliderIndex} sliderLength={sliderLength} handleChange={handleSliderDirectChange}></SliderIndicator>
<div className='sliderContainer'>
<SliderControl direction="left" sliderControlsOff={sliderControlsOff} handleClick={handleSliderDirection}></SliderControl>
<div className="sliderWrapper" style={{transform: `translateX(${sliderIndex * -100}%)`, transition: `${sliderTransitionOff ? "none" : "all "+sliderDuration+"ms"}`}}>
{movies.map((movie, i) => (
<SliderItem backDrop={movie.backdrop_path} title={movie.title} releaseDate={movie.release_date} id={movie.id} key={i}></SliderItem>
))}
</div>
<SliderControl direction="right" sliderControlsOff={sliderControlsOff} handleClick={handleSliderDirection}></SliderControl>
</div>
</div>CSS .active class is simple
.sliderItem {transform: scale(2); z-index: 50}No other components have the z-index set
This is how it looks without hover: No hover
This is how it looks with hover: With hover
This is how it should look: Desired look
Where could the problem lie if the z-index works over classic
or divs, but not over constructed components?