Jump to content

CSS z-index problems


pleek

Recommended Posts

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

post-55659-13482403159426_thumb.png

Link to comment
https://forums.phpfreaks.com/topic/254694-css-z-index-problems/
Share on other sites

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

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.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.