zIndex issue in Internet Explorer 9 & 10

Question

Reading this question you're probably thinking 'not again' and want to mark it as duplicate. But after I've tried about every fix I could find up here and in other parts of the internet I couldn't think of another way to get a solution than asking here.

The problem is: I have a container, which should be completely clickable. The problem in this particular website is, that we can not control what elements will be inside of the container. Since there could be block-elements inside, we can't use an <a> tag instead of <div> as the container. We also want to the site to work in a no-js environment, so an onclick on the container is a no-go unfortunately.

That's why we choose an absolutely positioned <a> which will be an overlay for the entire container. This works well in every browser, except for IE.

In IE all content of the container is painted above the <a> , thus making it a non-clickable area. This isn't really much of a problem with the example here: just a small piece of text. But in other container we have images, tables etc. which completely fill the size of the container.

Even if I'd change the z-index of the <p> to 0 and the z-index of the <a> to 1 , the paragraph is still on top of the link. How is this possible? I've read all about stacking contexts and levels, and I still can't find a single thing wrong in my code.

Note: there's a display: hidden; <span> in the <a> , but that's for internal use and I don't think it will affect this issue.

Note: the div.content__container has a parent from which it can get the 100% dimensions.

HTML:

<div class="content__container">
    <p class="__align-to-bottom __right" >text <span class="__icon">f</span></p>
    <a href="#" class="__link"><span>text</span></a>
</div>

CSS:

.content__container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.content__container > *{
    position: relative;
}

.__align-to-bottom {
    position: absolute !important;
    bottom: 0;
    left: 0;
}

.__align-to-bottom.__right {
    left: auto;
    right: 0;
}

a.__link {
    position: absolute !important;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

a.__link span{
    display: none;
}

As said this works fine in every browser out there except for IE. I'm currently testing in 9 & 10 and I'm guessing IE<9 isn't going to be a walk in park either.

EDIT

As suggested I've created a fiddle . In this fiddle I've already implemented some remarks. Such as the display: block; line for a.__link and removing the content__container > *{} from my css. I've added some JS to clarify which element is being clicked on. In IE it's still not working: the onclick event from the paragraph is being triggered.

Answer 1

I came across an issue like this once where I had a blank link positioned absolutely over the top of some content I wanted to be clickable - I tried everything to get it to work and finally found a really dirty hack:

Make a transparent gif or png (has to be at least 50x50) and then use it as the background of the anchor. It should then be clickable, if it is the highest z-index

I take it your link is a block element and actually covers the 100% height and width too

Answer 2

Since there could be block-elements inside, we can't use an <a> tag instead of <div> as the container.

Why not? Are block-level elements allowed inside inline-level elements in HTML5?

ps. Your fiddle code works in IE8.