Why do developers use high z-index values

Question

Why do developers use high z-index values like "9999" or "1001" instead of 1, 2, 10, 50 or 100? I read that developers do this for safety purposes but using z-index 2 or 5 or 10 over 1 works fine then why choose such high numbers?

Answer here https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index — vadivel a, Feb 09 '20 at 05:53

score 4 · Accepted Answer · answered Feb 09 '20 at 05:52

Why developers do something is not a question with a straight-forward answer and requires a scientific research. This is not a board for that. However, from my own experience and from observing others:

Because you assume that you'll have 1, 2, 10, 50, 100 in the future and know that something will go over even that, so you pick 9999.
Because you're not sure which values you have used but you know you didn't place anything more than 9999, so you write that.
Because you have no idea how stacking contexts work, but high value of z-index seemingly fixes the problem and earns your salary and you don't really care about anything else.
Because everyone else does it that way.
Because it's copy/pasted from an ancient tutorial that did it.

Well, when I want a div that I know will be on top at all times (for example a preloader), I'll just give it 999. I occasionally use 1, 2, 3 but it's more like "I want to put it on the top at all times and I can just use 420 or 69 so why not..." — Tigerrrrr, Feb 09 '20 at 07:44

score 1 · Answer 2 · answered Feb 09 '20 at 05:55

As Kawaljit says does the z value on elements specify the order that they will be displayed. Imagine that these are the z values.

Picture = 1 Background = 2

If they are in the same position the background will be rendered on top of the picture.

This means that by using really high z values we can prevent anything else that might be added to the same position to be rendered on top of that. However, you are correct that it does not matter wheter the z value is two or 9999. It's just a convience way to do it.

Thanks for the question!

score 1 · Answer 3 · answered Feb 09 '20 at 06:00

1

This is just a practice CSS devs use to avoid any conflict with the rest of the elements specificity (z-index value) on the page. A safer way to start z-index with a very high value.

answered Feb 09 '20 at 06:00

Neha Sharma

732
1
4
13

score 0 · Answer 4 · answered Feb 09 '20 at 08:40

A high value z-index such as 999 and 9999 which are common is often used as a fail safe to make sure that the component you are implementing alwaysSwitched stays on top of all other Html elements on the webpage.

A Crazy Scenerio

Once upon a time, I had a situation where I implemented a modal in a project. But the existing chat integration button and popup keeps overlaying on top of the modal I implemented and was worse on mobile screens.

I had to increase my modal z-index to 9999999999 just to get it on top of the chat button. Because the chat button and pop-up was already using a high value z-index as a fail safe to always make sure their button is on top of any other element on the webpage.

Why do developers use high z-index values

4 Answers4