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，因为我的目标是我的标题。我已经尝试过z-index但它不起作用，因为http://malsup.com/jquery/cycle/lite/插件会覆盖我指定的z-index。我已经尝试在我的图像周围添加一个div并将div添加到目标中，就像这个$（'＃header div'）。cycle（）;它不起作用。它把div放在我的标题上，或者只是把我的订单搞得一团糟。它错开了我的div和h1。如何让h1保持在我的幻灯片放映之上？

Answer 1

你不能在包装div中使用H1标签（你命名为标题的那个）把它放在那个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>

保持我的H1在我的jQuery幻灯片放映之上

1 个答案: