CODEWITHSUNDEEP
htmlcsslayoutcss-position
WorkerThread
WorkerThread

Reputation: 2213

position: relative causes anchors to be unclickable

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.

Upvotes: 7

Views: 5837

Answers (3)

Paul D. Waite
Paul D. Waite

Reputation: 98846

@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/

Upvotes: 0

David Thomas
David Thomas

Reputation: 253396

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

Upvotes: 3

Sotiris
Sotiris

Reputation: 40086

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/

Upvotes: 10

Related Questions