CSS：在Unslider上覆盖文本

Question

我做了一个非常简单的Unslider设置有3个图像，我尝试在它上面叠加一个h1文本，但是当我这样做时，滑块上方（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;
}