2

I have a div having a css class attached to it which has z-index defined. This was working fine for chrome and firefox but not for IE. I had to put position:relative with IE. But the same approach does not work with edge. Nothing is working for Edge.

I have something like a button which when click two elements open, one overlapping the other. The one i want to be on top has z-index 50 and the other one has 20.

Do i need to add some other property alongside z-index to get i working on edge?

<div class="abc">
...
</div>

.abc{
z-index: 10;
}

I am having problem with just edge.

CuriousBug
  • 243
  • 1
  • 3
  • 16
  • What else is around it? What you have is correct but other conditions or elements might be interfering. Can you provide more complete code or example of what you're trying to do? – Bret Lipscomb May 03 '18 at 13:47
  • I don't believe there is something wrong with z-index only by itself on Edge. What version are you using? Keep in mind that it is being updated with windows updates so if you have turned automatic updating off you are using a really old beta version which can cause problems. In addition, can you provide some more code? – Samuil Petrov May 03 '18 at 13:48
  • Possible duplicate of [z-index not working with fixed positioning](https://stackoverflow.com/questions/5218927/z-index-not-working-with-fixed-positioning) – CuriousBug May 04 '18 at 07:08
  • 1
    same issue here – leonheess Jan 15 '19 at 23:31

3 Answers3

4

The z-index property only works on elements with a position value other than static (e.g. position: absolute;, position: relative;, or position: fixed).

There is also position: sticky; that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser.

Thanks to Evert

1

With my issue, I found a parent container element had a negative z-index, this caused all child elements to ignore their z-indexes.

Removing that negative z-index fixed it for me.

Jake Cattrall
  • 461
  • 4
  • 20
0

On caniuse and MDN it says that z-index is well supported by both explorer end edge. Are you sure there is not another conflict that explorer don't reconize ? What's up on chrome and firefox ?

CyrilHskt
  • 141
  • 1
  • 1
  • 8
  • 1
    Chrome and firefox work fine just with z-index. I had to add position: relative for IE. None of these work for Edge – CuriousBug May 03 '18 at 13:53