Empty DIV on top of links - still clickable?

Transparent areas of GIF images are known to cause problems when they overlap links or form fields, but what about an empty DIV?

Date Created: 9th October 2006
Date Modified: 9th October 2006

Home > HTML > DIV over links

Sparked by query in WebmasterWorld CSS Forum:
http://www.webmasterworld.com/css/3113684.htm

My Covered Test Link

The test link is not clickable with the mouse in the area covered by the empty absolutely positioned DIV. If we take off the border and background-color etc. the result is still the same.

Another Covered Link - but defined after the DIV in the source

NB: We can't assign z-index to elements in the document flow, ie. Non-positioned elements

This link is On Top!

By giving the last link a position and a z-index we can make it appear in front of the DIV. The empty DIV is actually defined before this element in the source, so technically we do not need to explicitly give it a z-index.

#toplink {
z-index:100;
position:relative;
}

[Home]