Question

I an making a slideshow and don’t know how to keep my header text above the slideshow. Here’s my code.

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

I know it’s cycling my h1 with my photos because I targeted my id of header. I’ve tried z-index but it doesn’t work because the http://malsup.com/jquery/cycle/lite/ plugin overrides the z-index I assign. I’ve tried putting a div around my images and adding the div with the target like this $(‘#header div’).cycle(); and it does’t work. It put the div over my header or just messes up my order like a glitch. It staggers my div and h1. How can I get h1 to stay on top of my slideshow?

Answer 1

you can’t have the H1 tag inside the wrapping div (the one you named header) put it outside of that div and resolve the problem with css, you can make it absolute and set the top and left, with a wrapper which is realtive. something like this:

<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>