losing link in the stack

Hey Jason

Just wondering why the link would not work (or how would I get the link to work) in this stack?

<div style="float:left;">
        <div style="position:absolute; z-index: 2;"><img src="images/sponsors-hexagons/mask.png" width="208" height="243"></div>
        <div style="position:relative; top: 0; z-index: 1;"><a href="#"><img src="images/sponsors-hexagons/platinum.jpg" width="208" height="243"></a></div>
      </div>

cheers

basic z-index.

you have 1 div that uses position:absolute;

and another that uses position:relative;


when css calculates the stacking order, it first looks at position.

absolute is stacked on top of relative, within the absolute stack, it looks at the z-index and within the relative stack it looks at z-index.

you could set the z-index in the relative stack to 1000, but it will still be below a div in the absolute stack with a z-index of 1.

add the link to a absolute z-index div or set the z-index for the absolute div to -1

the problem with that is that the background image then becomes the front image and thats what I am trying to avoid... i was just wondering if its possible to have the link that is associated with the background image to actually be clickable *through* the foreground image. I guess not.

I think an image map would achieve the same effect I am trying to do.

Thanks for taking a look

Jamie

background images should be applied through CSS backround-image attribute, not by trying to manipulate z-index.

Its going to be a slideshow in the background otherwise I would have used the background-image attribute. And each image in the slideshow needs to be a link. the foreground image is a 'framing' image

trying to manipulate the stack mixing position types wont work, you'll need to use another strategy.

look at some of the available slideshow scripts, surely one of the many out there should do what you are trying to.