时间戳

首页 > 解决方案 > 一个对象溢出，而另一个对象覆盖 css 反应

javascript - 一个对象溢出，而另一个对象覆盖 css 反应

问题描述

https://i.stack.imgur.com/QR8gn.jpg

如图所示，主体对象是重叠覆盖对象在我网站的主页中，我制作了一个覆盖对象。单击它时，主页及其所有元素将显示为黑色，但是当我在主页中制作了一个滑块并添加了一些关于该图像的描述时，该描述与我的那个覆盖对象重叠。您可以在图像中看到更多说明。

<div className="showCoachInfo">
  <div onClick={toggle1} className="overlayCoach"></div>
  <div className="infoDet">
    <img src={coach1} className="infoImg" />
    <p>Anbhol Singh</p>
    <p>NIS Coach</p>
    <p>National Medalist</p>
  </div>
</div>

.infoDet{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #000000;
    color: white;
    border-radius: 10px;
    height: 300px;
    width: 300px;
    transition: all 0.5s ease-in;
    font-size: 20px;
    text-align: center;
    font-family: 'Mate SC', serif;
    z-index: 10000;
}
.showCoachInfo,.overlayCoach{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; 
}

现在重叠的对象

<div
  key={index}
  className={index === activeIndex ? "slides activeS" : "inactiveS"}
>
  <img src={slide.urls} alt="" className="slide-image" />
  <h3 className="slide-desc"> {slide.description} </h3>
  {/* <h3 className="slide-desc"> {slide.title} </h3> */}
</div>

.slide-desc{
    background-color: black;
    opacity: 0.7;
    margin-left: 100px;
    width: 84.05%;
    height: 10%;
    color: white;
    font-size: 41px;
    position: absolute;
    text-align: center;
    top: 84.5%;
    z-index: 10;
    font-family: 'Mate SC', serif;
    border-radius: 0px 0px 10px 10px;
}

标签： javascripthtmlcssreactjs

解决方案

推荐阅读