反应组件 z-index答案

【问题标题】：React components z-index反应组件 z-index
【发布时间】：2022-09-30 19:18:01
【问题描述】：

我在基于组件的 React 应用程序中遇到 Z-index 问题。我目前有项目（组件）的列表（组件），我想让 css 缩放，z-index 将项目放在其他人的前面。

问题是悬停的项目位于同一列表中的其他项目之上，也在列表标题之上（经典 html 元素无反应组件），但 z-index 不适用于其他列表。

项目组件

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

列表组件

    <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 类很简单

.sliderItem {transform: scale(2); z-index: 50}

没有其他组件设置了 z-index

这是没有悬停的样子： No hover

这是悬停时的样子： With hover

它应该是这样的： Desired look

当 z-index 在经典上工作时，哪里可能出现问题

，或 div，但不是过度构建的组件？

标签： css reactjs react-native z-index

【解决方案1】：

相对位置，解决了...

【讨论】：