Question

I’ve looked everywhere, found plenty of articles, explaining work a rounds for IE 7,8 and 9 z-index problems, but none of these cases fixed my problem.

The problem is that I have content in the middle of a page that the user can interact with, but I don’t want the user to be able to interact until 2 seconds after page load (don’t need help with this). So I am using a blocker as a solution, a div that sits above the content being animated in the HTML, with position absolute, and covers the user interaction so you cannot mouseover animate.

This is working in Chrome and Firefox, but all IE’s are having z-index problems.

I made sure every parent element has a position of either relative or absolute, and even tried making the parent containers a higher index and vice-versa. Has anyone ran into a problem like this?

I cannot show code for private matter, but I’ve explained it thoroughly enough I hope.

Any questions, let me know.

Answer 1

In IE, I noticed that even when setting parent elements to position relative and/or absolute and having their z-index’s lower than the blocker div (which is a normal fix), the blocker div was still being stacked as an individual index, therefore not stacking over the other elements above. Another problem I noticed is that when you set the blocker background-color to a color, z-index stack works, and you cannot interact with the lower z-index elements. BUT when you set the empty blocker to transparent, z-index will not stack with the other elements (bug).

Here is a Work around for all IE Browsers *if you are trying to use an empty div to block user interaction (otherwise, the above should work):

CSS

#blocker {
    position:absolute;
    width: 100%;
    height: 200%;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    z-index:9999;
    background-image: url('/cont-img/Transparent.gif');
    background-repeat:repeat;
}

1. Download the transparent gif that works like opacity 0, but for all IE Browser’s: transparent.gif
2. Repeat gif background so that it repeats x&y over the above elements

HTML

    <!-- place empty blocker div BELOW content trying to block -->
    <div id="blocker"></div>