Question

I am terrible at css, please bear with me.

Three elements: .subscribe, #pictures, #menu.

These three need both .subscribe and #menu to be overlay on top of pictures. The css is below (all selectors are correct). I thought just z-index and positioning would do it, however, it’s not working out.

Anything obviously wrong? Thank you.

#slideshow * {
  margin: 0;
  padding: 0;
}
#slideshow {
  position: relative;
  padding: 14px 0 15px;
  width: 926px;
  height: 335px; 
}
#slideshow #pictures { 
  background: url('images/bg.jpg');
  width: 926px;
  height: 335px;
  left: 0;
  overflow: hidden;
}
#slideshow #pictures li {
  display: block;
  position: absolute;
  top: 0;
  width: 926px;
  z-index: -1;
}
#slideshow #pictures li img {
  display: block;
  position: relative;
  bottom: 0;
}
#slideshow #menu {
  list-style-type: none;
  right: 0;
  padding-top: 290px;
  padding-right: 20px
  position:relative;
}
#slideshow #menu li {
  display: block;
  float: right;
  z-index: 3;
}
#slideshow #menu li a {
  display: block;
  font: 11px "Lucida Grande", "Verdana";
  text-decoration: none;
  padding: 7px 0 7px 28px;
  z-index: 3;
  color: #ccc;
  line-height: 14px;
  vertical-align: middle;
}
#slideshow #menu li a:hover {
  color: #fff;
}
#slideshow #menu li.current a {
  font: 15px "Georgia";
  color: #fff;
  padding: 5px 0 5px 28px;
  line-height: 18px;
}
#slideshow #pictures .subscribe {
  height: 91px;
  width: 252px;
  position: relative;
  margin-top: 100px;
  float: left;
  bottom: 0;
  z-index: 2;
  background: url('images/SubscribeButton.png');
}
#slideshow #pictures .subscribe:hover {
  background: url('images/SubscribeButton-Dark.png');
}

Mark-up:

<div id="slideshow">    
      <ul id="pictures">
        <li style="visibility: hidden; zoom: 1; opacity: 0; "> <a class="subscribe"></a><img src="style/images/sample1.jpeg" alt="Slide 1" title="Sample 1" style="display: none; width:926px; height:335px "></li>
        <li style="visibility: hidden; zoom: 1; opacity: 0; "><a class="subscribe"></a><img src="style/images/sample2.jpeg" alt="Buenos Aires" title="Buenos Aires" style="display: none; width:926px; height:335px "></li>
        <li style="visibility: hidden; zoom: 1; opacity: 0; "><a class="subscribe"></a><img src="style/images/Slideshow-Image1.jpg" alt="Our design team creates the perfect collections of white shirts each season" title="Creation" style="display: none; width:926px; height:335px "></li>

      </ul>

      <ul id="menu">
        <li><a href="style/images/sample1.jpeg">three</a></li>
        <li><a href="style/images/sample2.jpeg">two</a></li>
        <li><a id="first" href="style/images/Slideshow-Image1.jpg">one</a></li>

      <li class="background" style="visibility: hidden; zoom: 1; opacity: 0; left: 0px; top: 188px; width: 166px; height: 28px; "><div class="inner"></div></li></ul>
    </div>

Answer 1

I think you’re close. But to keep it simple, I would just put the z-index on slightly different elements (namely the main container elements).

Have a play with the code here: http://jsfiddle.net/irama/GwcsF/1/

The key bits being:

#slideshow {
    position: relative;
}

#slideshow #pictures {
    left: 0;
    z-index: 1;
    position: absolute;
}

#slideshow #menu {
    right: 0;
    position:relative;
    z-index: 3;
}

#slideshow #pictures .subscribe {
    position:absolute;
    bottom: 0;
    z-index: 2;
}

Is that roughly what you were looking for? Let us know how you go!