How z-index works in a specific number?

Question

0.00/5 (No votes)

See more:

I have the code

<style>
    .datepicker {
        z-index: 1181 !important;
    }
</style>

What I don't know is why using 1181. How to find the clue in style file?

What I have tried:

google search:

The z-index property specifies the stack order of an element.

It means 1181 what?

Posted 2-Aug-17 5:54am

Member 12658724

Updated 2-Aug-17 6:00am

Add a Solution

2 solutions

Solution 1

The number refers to the level in the current stacking context[^]; an element with z-index[^] 2 is stacked higher than an element with z-index 1, for example.

A stacking level of 1181 means that will be stacked higher than everything with z-index < 1181, but lower than everything with z-index > 1181. The number seems very high, but that's fine: you don't need all an element for all stacking levels in-between; if you only have an element with z-index 1 and one with z-index 1181, the one with 1181 will just be stacked above the one with z-index 1, so there it wouldn't matter if it was 1181 or 2.

So why the developer used 1181 is something we can't really know. I doubt there are actually 1180 other stacked elements (or more, because z-index can be negative as well). It could be that he used huge gaps between z-indexes just in case he would add new stacked elements later on, but I'm just guessing here.

Posted 2-Aug-17 5:59am

Thomas Daniels

Updated 2-Aug-17 6:00am

v3

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

OriginalGriff · Accepted Answer · 2017-08-02T06:00:00

Solution 2

z-index specifies the order in which items are "layered": a higher number means that the item is "drawn over the top of" lower numbered objects.

A z-index of 1181 may just means that it's a random number that is greater than any other expected item, as so on the top of everything else - it has no other special meaning.
Ask the person who wrote it why he picked 1181 instead of 9999 if you really need to know - it's probably a birthdate or similar!

Posted 2-Aug-17 6:00am

OriginalGriff

Comments

Member 12658724 2-Aug-17 12:13pm

It maybe the highest number. Does it mean .datepicker style can be override since it is not important?

OriginalGriff 2-Aug-17 12:25pm

No, it's probably important *within the context of this particular application*

That doesn't mean it's important outside it. There may be other z-indexes which are designed to be higher or lower than 1181 to specifically set the display order.

Member 12658724 2-Aug-17 12:33pm

So the exclamation mark ! does not mean not as in C#.
In C#, != means not equal something. I thought !important meant not important

OriginalGriff 2-Aug-17 12:48pm

! has multiple uses in C# as well:
a != b is a boolean "a is not equal to b"
!a is a boolean "not a"

In CSS, !important has a specific meaning:
https://www.w3.org/TR/CSS2/cascade.html#important-rules