CSS z-index problems

[pleek]

I have a page that uses z-index to layer divs to create a wrap around effect with a ribbon. I also have a slideshow that the banner is supposed to be on top of at the top so it looks like the image below (attachment 1). The problem is even if i change the z-index of "banner" to "100000" the slideshow still shows up on top of it. Any help would be appreciated.

 

HTML

<DIV CLASS="main">
<DIV CLASS="banner"></DIV>
<div CLASS="slideshow" id="slideshow">
	<ul id="slides">
		<li><img src="slide1.jpg" width="800" height="312" alt="Sea turtle" /></li>
		<li><img src="slide2.jpg" width="800" height="312" alt="Coral Reef" /></li>
	</ul>
</div>
</DIV>

 

CSS

.banner {
margin:0 auto;
width:900px;
height:130px;
background:url(banner.png) no-repeat top left;
z-index:3;
}
.slideshow {
margin-top:-75px;
width:800px; 
height:312px;
z-index:2;
}

[gristoi]

you need to use css positioning. make the main container relative and the baner and slidehow absolute. the z-index should kick in then:

 

.banner {
margin:0 auto;
width:900px;
height:130px;
background:url(banner.png) no-repeat top left;
z-index:3;
        position:absolute;
        top:0px;
        left:0px;
}
.slideshow {
margin-top:-75px;
width:800px; 
height:312px;
z-index:2;
        position:absolute;
        top:0px;
        left:0px;
}

[pleek]

Ahhh knew it was something simple, now they layer correctly but any controls (links) i add to the slideshow div won't work. I added a link to on of the "li"s and i can't click on it.

 

<li><a href="#"><img src="slide1.jpg" width="800" height="312" alt="Sea turtle" /></a></li>

 

any suggestions? I want each image in the slideshow to be a link to take the user to a new page about that image.

[pleek]

nevermind, not sure what i did but it works now. Thanks for your help!