时间戳

首页 > 解决方案 > 删除侧边栏上的 div 覆盖

html - 删除侧边栏上的 div 覆盖

问题描述

图像示例

/* SHOWCASE */

.showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: flex-end;
  color: #fff;
}

.showcase .title {
  position: absolute;
  height: 450px;
}

.showcase .parraph {
  position: absolute;
  height: 400px;
}

.showcase .slider {
  overflow: hidden;
  height: 100%;
}

.showcase .slider ul {
  display: flex;
  padding: 0;
  width: 400%;
  animation: change 16s infinite alternate linear;
}

.showcase .slider li {
  width: 100%;
  list-style: none;
}

.showcase .slider img {
  width: 100%;
  height: 700px;
}
<!-- SHOWCASE -->
<header class="showcase">
  <h2 class="title">X-TOUR</h2>
  <p class="parraph">Ushuaia - Tierra del Fuego Antártida e Islas del Atrlántico Sur</p>
  <div class="slider">
    <ul>
      <li>
        <img src="img/img1.jpg" alt="">
      </li>
      <li>
        <img src="img/img2.jpg" alt="">
      </li>
      <li>
        <img src="img/img3.jpg" alt="">
      </li>
      <li>
        <img src="img/img4.jpg" alt="">
      </li>
    </ul>
  </div>
</header>

下午好，我的侧边栏突出显示“x-tour ushuaia-tierra del ..”的文字有问题，我不知道我做错了什么，也许我把容器分开错了，我尝试了一切，但我无法解决它，你能帮我一把吗？从已经非常感谢了！我认为这是我放在它上面的不透明度问题，即使图像中心的文本被删除，侧边栏也会继续出现。

标签： htmlcss

解决方案

看起来包含“x-tour ushuaia-tierra del ..”的元素具有比您的侧边栏更高的 z-index。

有点 hacky，但我可能会在侧边栏容器中添加一个类似 9999 的 z-index，以确保它始终位于顶部。

因此，在您的 CSS 中添加类似这样的内容，其中 .sidebar 是侧边栏元素。

.sidebar { z-index: 9999; }

推荐阅读