jquery - 将我的 H1 放在我的 jQuery 幻灯片上

Question

我正在制作幻灯片，但不知道如何将标题文本保留在幻灯片上方。这是我的代码。

html

    <h1>Baltimore Maryland</h1>
    <img src="images/Baltimore_Main-1.jpg" />
    <img src="images/Row-Baltimore-top.jpg" />
    <img src="images/bmoreBoat.jpg" />

  </div>

jQuery

 $('#header').cycle(); 

我知道它正在用我的照片循环我的 h1，因为我的目标是我的标题 id。我试过 z-index 但它不起作用，因为http://malsup.com/jquery/cycle/lite/插件覆盖了我分配的 z-index。我已经尝试在我的图像周围放置一个 div 并添加带有这样目标的 div $('#header div').cycle(); 它不起作用。它将 div 放在我的标题上，或者只是像故障一样弄乱了我的订单。它错开我的 div 和 h1。如何让 h1 保持在幻灯片的顶部？

Answer 1

您不能将 H1 标签放在包装 div 内（您命名为 header 的标签）将其放在该 div 之外并使用 css 解决问题，您可以将其设为绝对并设置顶部和左侧，并使用真实的包装器. 像这样的东西：

<div class="relative_wrapper" style="position: relative;">
<h1 style="display: block; position: absolute; top: -15px; left: -15px; z-index:900;">Baltimore           Maryland</h1>
<div id="header">
    <img src="images/Baltimore_Main-1.jpg" />
    <img src="images/Row-Baltimore-top.jpg" />
    <img src="images/bmoreBoat.jpg" />
</div>
</div>