z-index and anchor pseudo-classes (a hrefs)

[Digitalbrit]

I am struggling with this example page

The download latest brochure button in the header is being positioned using z-index below the blue wave. However as the z-index of the blue wave is higher than that of the button, this is making the button non-clickable. This might also be due to how I have positioned the blue wave and its associated height, but I’m not sure of that yet.

I want to have the button behind, then the wave, then the logo; but the button and logo need to be clickable.

Any advise on how this can be achieved would be appreciated.

Tim

[Digitalbrit]

I should also have said that the button will not always be present which is why it is being rendered as a separate image.

[Digitalbrit]

I have a crude workaround here : http://sandbox.rockingdesign.co.nz/index2.html but this relies on an empty div.

Can anyone suggestion anything better.

[ethanhinson]

You could probably do it without the extra div, something like….

and CSS

#container-middle-z-index {



position:relative;

z-index:125;

}



.image-lowest-z-index {



position:absolute;

z-index:100;

}

.link-highest-z-index {



display:block;

z-index:150;

width:;

height:;

}

And then use top, left etc. to position accordingly. Also might need a little tweaking to work at multiple resolutions but hopefully that can get you going!

E

[Digitalbrit]

Thanks ethanhinson. I’m trying this out now.

[Author]

Posts