Z Index, layering images, need help (going crazy!)

[garynng]

Need some help on layering images. As you can see, the "polaroid" has tape on it - I want that tape to overlap the menu bar.

The menu bar is a grapic (there is a slight gradient to it) and on top of it are the actual menu graphics.  If I remove the menu graphics, the photo overlaps fine.  But if I insert the menu graphics, they lie on top of the polaroid.  Thanks in advance for any help you can provide.

Gary

Here is the code for the page:

<h1>SanDiegoHomegrown.com</h1>

<img src="images/menuBar.gif" />

<ul id="menuBar">
   <li id="listen"><a href="songs.html">Listen</a></li>
  <li id="submit"><a href="submit.html">Submit Songs</a></li>
  <li id="seals"><a href="seals.html">Help the Seals</a></li>
  <li id="about"><a href="about.html">Our Story?</a></li>
  <li id="sponsors"><a href="sponsors.html">Sponsors</a></li>
</ul>

<div id="polaroid">
<img src="images/band2_polaroid.png" width="280" height="354" />
</div><!--polaroid-->

Here is the CSS:

#polaroid {
    height: 354px;
    width: 280px;
    padding-left: 50px;
    margin-top: -40px;
}
#menuBar {
    height: 30px;
    width: 960px;
    padding: 0px;
    font-family: "Courier New", Courier, monospace;
    list-style-type: none;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    margin-top: -30px;
}

#menuBar a {
    width: 175px;
    display: inline-block;
    color: #2F3032;
    text-align: left;
    vertical-align: 0%;
    margin: 0px;
    list-style-type: none;
    float: left;
    height: 35px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
    text-indent: -9999px;
}

#menuBar #listen {
    background-repeat: no-repeat;
    position: absolute;
    background-image: url(images/titles/listen_bar_orig.gif);
}

#menuBar #submit {
    background-image: url(images/titles/submit_bar_orig.gif);
    background-repeat: no-repeat;
    position: absolute;
    margin-left: 150px;
    width: 200px;
    z-index: 1;
}

#menuBar #seals {
    background-image: url(images/titles/seals_bar_orig.gif);
    background-repeat: no-repeat;
    position: absolute;
    margin-left: 375px;
    width: 225px;
}

#menuBar #about {
    background-image: url(images/titles/about_bar_orig.gif);
    background-repeat: no-repeat;
    position: absolute;
    margin-left: 625px;
}

#menuBar #sponsors {
    background-image: url(images/titles/sponsor_bar_orig.gif);
    background-repeat: no-repeat;
    position: absolute;
    margin-left: 800px;
}

[garynng · Accepted solution]

Auggh, just figured it out.  The Polaroid needed to be relative positioning!