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.

score 10 · Accepted Answer · answered Mar 08 '11 at 16:17

10

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/

answered Mar 08 '11 at 16:17

Sotiris

38,986
11
53
85

1

+1 for reminding that z-index only works with positioned elements. – Memochipan Dec 17 '12 at 20:57

David Thomas · Answer 2 · 2011-03-08T16:21:33.367

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

score 0 · Answer 3 · edited May 23 '17 at 11:54

@David’s correct in that the position: relative on the .content items is giving them a z-index, meaning they’re “on top” of the link you’ve floated to the right.

I think a better solution though is to add position: relative; to the link you’ve floated right as well, and give it a z-index higher than .content:

#rightBox
{
    ...
    position: relative;
    z-index: 2;
}

.content
{
    position: relative;
    z-index: 1;
}

See http://jsfiddle.net/gBchZ/6/

position: relative causes anchors to be unclickable

3 Answers3