jquery - CSS:在 Unslider 上覆盖文本

Question

我用 3 张图片做了一个非常简单的 Unslider 设置，我尝试在上面覆盖一个 h1 文本，但是当我这样做时，我的 slider 上方的 div 中出现了一个奇怪的水平空间 ( See image )

这是我的代码:

<div class="photos" id="photos">
    <h1 class="photos-title">P H O T O G R A P H Y</h1>
    <div class="my-slider">
      <ul>
        <li><img src="images/image1.jpg" alt=""></li>
        <li><img src="images/image2.jpg" alt=""></li>
        <li><img src="images/image4.jpg" alt=""></li>
      </ul>
    </div>
  </div>

还有我的 CSS:

.photos{
  width: 100%; height: 100vh;
}
.my-slider{
  width: 100%; height: 100vh;
  margin: 0; padding: 0;
  z-index: 0;
}
.photos-title{
  font-family: "Anton";
  position: relative;
  z-index: 1;
  margin: 0; padding: 0;
  top: 50%;
  transform: translate(0,-50%);
}

Answer 1

这个空间是为标题预留的地方，使用 position:absolute

.photos-title {
     position: absolute; 
}
.photos{
     position: relative;
}