将标题定位在滑块上

Question

当我做到这一点时，一切似乎都很好，但后来我检查了一个更大的显示器，标题刚刚离开div。因此，我的想法是，制作一个div，其中包含图像滑块（在css3中完成）及其上方（在图像上分层）是两个标题。 html看起来像这样：

<div class="heroImg" id="heroImg">
  <div id="slidercontainer">
    <div id="css3slider">
      <img src="images/slideshowimg/aya.jpg" alt="Aya Ueto">
      <img src="images/slideshowimg/malay.jpg" alt="Malay Girl">
      <img src="images/slideshowimg/jkarta.jpg" alt="Jakarta Child">
      <img src="images/slideshowimg/american.jpg" alt="American Girl">
      <img src="images/slideshowimg/aya.jpg" alt="Aya Ueto">
      <div class="overlayone">
        <p>“A life spent making mistakes is not only more honorable, but more useful than a life spent doing nothing.” </p>
      </div>
      <div class="overlayone" id="overlaytwo">
        <p>“Every portrait that is painted with feeling is a portrait of the artist, not of the sitter.” </p>
      </div>
    </div>
  </div>
</div>

图像滑块区域宽1024像素，高500像素。

这是css：

.overlayone {
    text-align: left;
    color: transparent;
    height: 120px;
    width: 1024px;
    /* [disabled]position: relative; */
    top: 130px;
    background-color: rgba(0,0,0,0);
    /* [disabled]z-index: 999; */
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

#overlaytwo {
    width: 530px;
    height: 165px;
    /* [disabled]top: 300px; */
    left: 615px;
    position: relative;
    /* [disabled]clear: both; */
}   


#heroImg {
    background-color: rgba(102,102,102,1);
    clear: both;
    height: 500px;
    width: 1024px;
    float: left;
    position: relative;
}

div#css3slider {
    position: relative;
    width: 5120px;
}

div#slidercontainer {
    position: relative;
    overflow: hidden;
    background: #000
}

在某个地方某处，我搞砸了一切。我怎样才能解决这个问题？ 谢谢。