Difficulties with z-index

HTML & CSS
1

Hi all,

I have built a site which has four divs, one for each corner that act as a kind of subtle vignette… the divs are coded with ids of topleft/topright/bottomleft/bottomright.

These are positioned and then given a z-index of 0. The nab is then positioned relatively, with a z-index of 20.

The problem is, if the browser is around the same width of the content, the vignette divs cover the nab, making the anchors unclickable.

I would be very grateful if somebody could take a look and point me in the right direction.

The page can be found at: Web Design & Photography, based in Worthing, West Sussex - pelli Creative

Many thanks
Simon

2

z-index only applies to positioned siblings. The corner elements are siblings to #wrap. Make #wrap position:relative, and z-index: >1.

That alone won’t fix it because you have

#topleft, #topright, #bottomleft, #bottomright {
    height: 202px;
    width: 202px;
   [color=red] z-index: 999;[/color]
}

Change that z-index to 1.

cheers,

gary