z-index layering woes - css

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>three</li>
<li>two</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!

Answer 2

You need to use position: relative for any parent DIV (with the image in it). Any layers to overlay that DIV must be nested inside the parent and with the CSS attribute set to position: absolute.
This sets the nested DIV tag to sit at the top left of it's parent, and overlay it. Then the z-index should work.
Hope that helps.
Ref: http://css-tricks.com/3118-text-blocks-over-image/

Answer 3

Post the related HTML, please!
However, the contents of blocks appear to be getting the z-indices, but this will often not work because of the "Stacking contexts". See Overlapping And ZIndex.
So, depending on the HTML, you'll probably need to set z-index on the #pictures and #menu containers.