React components z-index

Question

I have an issue with Z-index in component based React app. I currently have list (component) of items (component) and I want to make css scale and z-index takes item in front of others.

The problem is that hovered item is on top of others items in the same list, also on top of List Headlines (classic html element no react component), but the z-index doesnt work for the other list.

Item Componenent

          <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 componenet

    <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 has z-index set

This is how its look like without hover: No hover

This is how its look like with hover: With hover

This is how it should look: Desired look

Where could be problem, when the z-index works over clasic

, or divs, but not over constructed components?

Answer 1

postion relative, solved that...

EDIT: Parent element should be position relative, as described in https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

In my case its the div inside which I was mapping the items

...<div className="sliderWrapper" style={{transform: `translateX(${sliderIndex * -100}%)`, transition: `${sliderTransitionOff ? "none" : "all "+sliderDuration+"ms"}`, position: 'relative'}}>
  {movies.map ((movie, i)=>
     <SliderItem....