Internet Explorer z-index bug?

Question

How do you overlap an element over another element that is positioned relatively in Internet Explorer? Z-index doesn\'t work, it always appears behind the relatively positi

Answer 1

I had the same problem in an html where many repeated relative positioned divs were blocking absolute positioned div's view. The workaround provided by www.brenelz.com, that I've already used with success wasn't working in this case. So, the following worked for me: I removed the relative positioning from those divs I've mentioned first, then added a CSS to turn those divs on relative when hover. Let me show you the code:

Before:

DivThatYouMustHover {
height: 300px;
position: relative;
width: 200px;
}

After:

DivThatYouMustHover {
height: 300px;
width: 200px;
}
DivThatYouMustHover:hover {
position:relative;
}

This way the others 'sisters' of that div stay with normal positioning and don't interfere with the layout. It worked very well for me! I hope it helps you too.

Answer 2

Create and then set an additional transparent background image on the element you want to have on top. For me it finally worked in IE8. SASS:

  #galerie-link {
    position: absolute;
    z-index: 1000;
    top: 25px;
    left: 40px;
    a {
      display: block;
      width: 185px;
      height: 90px;
      background-image: url(../images/transparent.png);
    }
  }

Answer 3

I wanted to note that if you are using IE8 and below, it does not support CSS3 filters. This was my issue.

I was using:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@black00', endColorstr='@black00', GradientType=0);

No matter what I set my position or z-index to, you could not see the other layer because it was causing a complete mask over that layer (instead of going from clear to black and to clear again).

By removing the CSS3 filter for just IE8, I was able to solve my problem.

Hope this helps someone who runs into the same issue.

Answer 4

I had a real pain with this problem that this particular workaround wasn't relevant for. It's a little hard to explain so I'll try using code:

<div id="first" style="z-index: 2">In between</div>
<div id="second" style="z-index: 1">In the back
<div id="third" style="z-index: 3">Foreground</div></div>

The problem is that setting the parent's z-index to a higher value would move it to the foreground instead of the back where its supposed to be. I stumbled upon a solution completely by accident: I made a copy of the foreground element (id=third) outside its parent.

<div id="first" style="z-index: 2">In between</div>
<div id="third" style="z-index: 3; visibility:hidden">Foreground</div>
<div id="second" style="z-index: 1">In the back
<div id="third" style="z-index: 3">Foreground</div></div>

Its worth mentioning that in my original code the elements don't have IDs so I don't suffer from 2 elements sharing the same one and invalidating my HTML.

I think its safe to classify this weirdness as another bug that happens to help with the original, but it works, at least for me. Hope somebody finds this useful!

Answer 5

You're not by any chance trying to put something over a combobox (select tag), iframe or flash movie right?

In those cases z-index is a lost cause.

Otherwise what browser version are you using and are you using absolute positioning?

Answer 6

Looks like I'm kidding, but I am not

.myLinkCssClass {
    background          : url(#);
}