Understanding Z-index

[magicmark (Mark Willis)]

Hi all.

Am I right in understanding that a z-index of 20 will show above a z-index of 10, but below a z-index of 30?
Is it as simple as this?

I have created 2 different modal pop-ups, one for contact form (various places on the page) and one for a link in the footer (Dream Days Bridal Wear)

Live website here and Shared public link here so you may see what I’ve done if you wish.

The contact pop up, I followed a tutorial and set the z-index to 9999 (so it overlays everything)
The new pop-up I have done, I used z-index of 8888. Is it right or wrong to do this, and what is a good general rule to follow with z-indexes?

Thanks in advance.

[StevenP (Steven Victor Sigvard Persson)]

Yep, you are right! Z-index of 20 will show above 10 but be below 30

Regarding Z-index values, it doesn’t matter much, but generally, to keep it simple there is no use of having them at 9000+ etc. Any specific reason you got them so high? It’s better to keep them as low as possible, starting from “0” and then gradually number up because it’s easier to remember than 8324 on the Nav and 8482 on the loader div (it was just an example… .

[magicmark (Mark Willis)]

Hi Steven,

Thank you for clearing that up. The tutorial I followed said to set the modal background to 9999 z-index, which was a bit pointless it seems, as it’s only served to confuse me for so long! I’ll change them to easier to remember levels.

Mark

[StevenP (Steven Victor Sigvard Persson)]

Yep, no need to have the numbers that high!