Fullscreen minus z-index anchor not clickable

The issue

I'm using jQuery supersized for a full screen background image, which will be a clickable advert. Above the main content in the markup, I'm using a anchor tag, position fixed, z-index of -1, display block, and height/width 100%. All that works perfec开发者_开发百科tly, problem is when the z-index is applied the "clickable-ness" of that anchor tag vanishes.

Anyone got any ideas? I could use 2 anchor tags, positioned absolute of the main content and push them out to each side, however I'm not sure how this effect is usually applied.

Any help will be greatly appreciated

---

The lower the z-index, the lower it is in the stacking context.

Putting a -1 on the anchor would, theoretically, place it beneath an element with z-index of 0, and so you may be losing click-ability for that reason.

I can't find a reference to back this up, but I don't think negative values are allowed.

Reference for stacking contexts: TimKadlec.com -- Detailed Look at Stacking in CSS

update

Some quick fiddling around revealed z-index of -1 on an anchor:

• with nothing else on the page -- makes it un-clickable in Chrome.
• with just one other element on the page -- made the anchor un-clickable in Chrome and Firefox (but not IE8)

... so I would advise against the negative z-index. Bump it up to 0, and put z-index of 1 on siblings and see if that works.

---

Even though some of your elements may have invisible backgrounds, you still cannot click through them. You must first decide on the set of elements that will not result in clicking the ad. They must all be sibling elements of your advertisement, or children thereof. Now if you set background-color:red on them, that is where the user's clicks will not trigger your ad (this is just to visualize of course). You can now set the z-index of your ad to -1 if necessary.

Afterwards you may need to put position:relative on the parent element of all these elements, not positive.

There is also a minor chance the body tag might interfere.