What is the maximum and minimum value for z-index?

Asked

Viewed 2,025 times

18

I was arguing with some friends about putting 99999 in the z-index to ensure that the element has the highest priority of overlapping over another element.

But when I thought about it, I got a little curious:

  • What is the maximum value for z-index?
  • What is the minimum value for z-index, as it supports negative values?

2 answers

6

Information taken from the Internet:

│ Browser              │ Max z─index value │ When exceeded, value changes to: │
╞══════════════════════╪═══════════════════╪══════════════════════════════════╡
│ Firefox 0 - 2        │ 2147483647        │ element disappears               │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Firefox 3            │ 2147483647        │ 0                                │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Firefox 4+           │ 2147483647        │ 2147483647                       │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Safari 0 - 3         │ 16777271          │ 16777271                         │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Safari 4+            │ 2147483647        │ 2147483647                       │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Internet Explorer 6+ │ 2147483647        │ 2147483647                       │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Chrome 29+           │ 2147483647        │ 2147483647                       │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Opera 9+             │ 2147483647        │ 2147483647                       │

Read more here.

  • 7

    Information is up to date for current versions of browsers?

4

If you browse the latest version of the specification and for na property list and arrive at the z-index property, there has the last definition of the same

  • Name: z-index
  • Value: auto | < integer >
  • Initial: auto
  • Applies to: positioned Elements
  • Inherited: in the
  • Percentages: N/A
  • Computed value: the keyword auto or an integer
  • Canonical order: per Grammar
  • Animatable: < integer >
  • Animation type: by computed value

The value is the type integer, which is to say 2³² (-2147483648 to +2147483647).

Now if browsers will follow this value to the letter, it would be another task to be discovered.

In this other answer at stackouverflow in English, has more elaborate answers.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.