Unclickable anchor tag | 易学教程

问题

I use this html code

<div class="titleIn"> 
    <h2><a href="/link2">link2</a></h2>
</div>

and for some reason the link2 is not clickable (no hand cursor)

The CSS is:

.titleIn {
    direction: rtl;
    margin-bottom: 10px;
    margin-right: 0;
    margin-top: -10px;
    position: relative;
    text-align: right;
    z-index: -1;
}

Any idea?

回答1:

I can't say I know why, but I know what's causing it: Your z-index: -1. If you remove that, the problem goes away (at least, it does for me on Chrome, Firefox, and Opera; not on IE6 or IE7, though). Here's a live copy of your example, and an updated copy with z-index: 0 instead.

By giving it a z-index less than zero, you're putting it below the main flow content, and I guess the document isn't letting the event pass through it (just like any element with a non-transparent background setting).

IE seems to have a separate issue with the combination of direction: rtl; and position: relative;, but I think it is a separate issue. If I remove every style in .titleIn except direction: rtl; position: relative;, IE still breaks (the link is unclickable). If I remove either of those, IE starts working (but of course, your layout doesn't do what you want).

回答2:

Unless you made the body's z-index <-1, you are essentially putting the link behind the entire body of the page, of course it's not click-able. (Elements such as body and headings will span the entire width that it is defined, thus invisibly blocking other elements that maybe visible, but not click-able)

If you used Firebug, it will illustrate that pretty well by highlighting the area of the tag.

回答3:

Well, when I try this in IE, the link becomes active only after I remove position: relative; and margin-top: -10px;. Soooo, do you really need the position: relative? :)

来源：https://stackoverflow.com/questions/4537789/unclickable-anchor-tag

标签

html

css

anchor