Z-Index Values

Developing for different browsers can be difficult. Each browser can have it's own set of rules and coding for each browser can sure be difficult. For example when you use Flexbox you have to remember to add CSS display lines to make sure each browser will display correctly.

Recently, I was working on an informational window that will track with the question mark button. I make the window be positioned where it needed to be we ended up using NGX-Popper. Works great! You can resize the browser and the pop-up moves exactly where it needs to follow the button you pushed.

I checked how it looked in Chrome and everything was working great after adding a line in the CSS file:

.inside-popper {
z-index: 999;
}

I selected 999 just because it is a high number with the hope that a higher z-index would not be selected for another element. Looks great...until I pull it up in Internet Explorer.

When I opened this up in internet explorer, the pop-up was not the item at the front. Some elements of the pop-up were showing correctly but it seemed the background was clear and was allowing the elements behind to come to the front.

Here is a shot IE left and Chrome on the right:

I had the z-index in the CSS file but it wasn't recognizing it in IE, or so it appeared. After doing some research I found that it looks like IE generates a new stacking context for elements that are positioned. This means the z-index will have a value of 0. Z-index won't work as expected.

The work around I found was to wrap the popup in another div that had a class with a higher z-index then my pop-up:

.popper-wrap {
position: relative;
z-index: 1000;
}

.inside-popper {
z-index: 999;
}

Now IE looks the same as Chrome. Just another one of those things to watch out for when looking at the different browsers.