position: relative causes anchors to be unclickable

Question

I was fiddling around with a web site I am developing, attempting to fix some odd IE7 bugs, since this is an internal project and IE7 is the standard browser. I ended up adding "position: relative" to correct a couple IE-specific layout problems, but I seem to have made things worse in FF/Chrome (I consider myself more of a systems programmer, but my current responsibilities involve more of a web focus unfortunately).

The specific problem is that the "position: relative" elements ended up making some of my links, which were floated to the right, unclickable. I've created a simple test page that I hope will explain this better than I can with words: http://jsfiddle.net/gBchZ/.

I will sort through this mess eventually, but I was hoping that someone could explain the reason behind my links getting hidden behind the position: relative elements.

Answer 1

Without having the link of the site is difficult to tell exactly what is wrong. But in any case, a solution could be to use z-index for the parent of a. For example z-index:100. Keep in mind that z-index works only with positioned elements, so you can use position:relative.

Demo based on your example: http://jsfiddle.net/gBchZ/3/

Answer 2

This is because the .content divs are covering the right-box (in your demo). If you add a margin-right to those divs the a becomes 'reachable:'

.content
{
    position: relative;
    margin-right: 20%;
}

JS Fiddle demo

You could also use position: absolute; to make the a element appear 'higher' in the z-index, though this becomes rather complex:

#rightBox
{
    background-color: green;
    width: 25px;
    height: 25px;
    position: absolute;
    right: 0;
    top: 50%;
    margin: -20px .5em .5em .5em;
    padding: .5em;
}

JS Fiddle demo