0

スライドショーを作成していますが、ヘッダーテキストをスライドショーの上に配置する方法がわかりません。これが私のコードです。

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(); 

ヘッダーのIDをターゲットにしたので、写真でh1を循環していることがわかります。z-indexを試しましたが、http://malsup.com/jquery/cycle/lite/プラグインが割り当てたz-indexをオーバーライドするため、機能しません。画像の周りにdivを配置し、次のようなターゲットでdivを追加してみました$('#header div')。cycle(); そしてそれは動作しません。それは私のヘッダーの上にdivを置くか、グリッチのように私の注文を台無しにします。それは私のdivとh1をずらします。スライドショーの上にh1を表示するにはどうすればよいですか?

4

1 に答える 1

0

ラッピング 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>
于 2012-12-02T16:05:51.227 に答える