596

I have a div in my HTML page. I am showing this div based on some condition, but the div is displaying behind the HTML element where I pointed the mouse cursor.

I have tried all values for z-index from 0 - 999999. Can anyone tell me why this is happening?

Is there any minimum or maximum value of Z-INDEX property of CSS?

.divClass {
     position: absolute; 
     left: 25px; 
     top: 25px; 
     width: 320px;
     height: 300px; 
     z-index: 1000; 
}
<table cellspacing="0" cellpadding="0" width="100%">
  <tr>
    <td>
      <asp:HyperLink ID="lnkProgram" runat="server"></asp:HyperLink>
    </td>
  </tr>
  <tr>
     <td>
         <div class="divClass">
           Some Data
         </div>
     </td>
  </tr> 
</table>

I am showing and hiding the div with .divClass onclick via the <asp:hyperlink> using jQuery.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Sachin Gaur
  • 12,909
  • 9
  • 33
  • 38
  • The issue probably isn't to do with z-index specifically. Can you give some example HTML and CSS that illustrates the behaviour? What browsers are you experiencing this in? – roryf Jan 29 '09 at 09:57
  • Just out of interest could you try the same thing out without using the table, just some content, the link and the div. Also put a background colour on the div just to be certain while you're developing. – roborourke Jan 29 '09 at 11:50
  • 96
    "tried all value for Z-INDEX property from 0 - 999999". I find that hard to believe. – sampathsris Oct 20 '14 at 04:45
  • 4
    @Krumia I don't, He could try all the z-index values between 0-999999 with JS... Just an option... – FullyHumanProgrammer Nov 10 '15 at 15:10
  • 4
    No one actually mentioned the `display: none` in his CSS? – Mark Baijens Aug 14 '18 at 14:14
  • 1
    @MarkBaijens No one mentioned it because the question said it was shown on click of the anchor element via jQuery. But since 3 other users missed that along with you, I've edited it out of the question to avoid any future confusion. – TylerH May 11 '19 at 00:16

12 Answers12

352

http://www.w3.org/TR/CSS21/visuren.html#z-index

'z-index'

Value: auto | <integer> | inherit

http://www.w3.org/TR/CSS21/syndata.html#numbers

Some value types may have integer values (denoted by <integer>) or real number values (denoted by <number>). Real numbers and integers are specified in decimal notation only. An <integer> consists of one or more digits "0" to "9". A <number> can either be an <integer>, or it can be zero or more digits followed by a dot (.) followed by one or more digits. Both integers and real numbers may be preceded by a "-" or "+" to indicate the sign. -0 is equivalent to 0 and is not a negative number.

Note that many properties that allow an integer or real number as a value actually restrict the value to some range, often to a non-negative value.

So basically there are no limitations for z-index value in the CSS standard, but I guess most browsers limit it to signed 32-bit values (−2147483648 to +2147483647) in practice (64 would be a little off the top, and it doesn't make sense to use anything less than 32 bits these days)

f.ardelian
  • 6,716
  • 8
  • 36
  • 53
Tamas Czinege
  • 118,853
  • 40
  • 150
  • 176
  • 22
    It's important to note that the max z-index value on Safari 3 was 16777271. This was raised to the 32-bit standard in Safari 4 so it's only a concern if you're targeting older browsers. Also, even in Safari 3 anything above 16777271 gets capped at that, so unless you're using absurdly large z-index values to order multiple elements you shouldn't have a problem (i.e. setting one element to a z-index value of 2147483647 will ensure that element stays at the very top in any browser, unless it's competing with another element that also has a z-index > 16777271). – Doktor J Oct 24 '13 at 20:24
  • 10
    @DoktorJ Does anyone know why it's 16777271? It seems bizarre that it is 56 more than the limit of a 24-bit unsigned integer. – Jools Feb 24 '16 at 15:24
  • 2
    @Jools [according to webkit dev Eric Seidel](https://lists.webkit.org/pipermail/webkit-dev/2009-May/007708.html), that was the result of using a 24-bit bitfield - `log base 2 (lg) = lg(16777271)` – jaynetics Aug 04 '16 at 10:05
  • 4
    @Janosch Sorry, I don't understand. lg(16777271) is greater than 24. I would have thought that a 24-bit bitfield wasn't big enough. – Jools Aug 05 '16 at 11:25
  • 4
    @Janosch, 2^24 = `16777216`. `16777271` will thus require 25 bits. – Pacerier Sep 12 '17 at 00:14
  • For modern browsers that support `Number.MAX_SAFE_INTEGER` you might just use that - either statically (currently 9007199254740991) or via CSS-in-JS. If it doesn't exist you could fall back to either 16777271 (Safari 3) as @DoktorJ noted or +2147483647 as Tamas noted in this answer. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER – Peter W Aug 10 '20 at 22:50
182

My tests show that z-index: 2147483647 is the maximum value, tested on FF 3.0.1 for OS X. I discovered a integer overflow bug: if you type z-index: 2147483648 (which is 2147483647 + 1) the element just goes behind all other elements. At least the browser doesn't crash.

And the lesson to learn is that you should beware of entering too large values for the z-index property because they wrap around.

Cesare
  • 9,139
  • 16
  • 78
  • 130
Ran
  • 7,541
  • 12
  • 59
  • 72
  • 71
    Because this (2147483647) is the largest positive value of a signed integer on a 32 bit operating systems... – Badr Hari Dec 01 '10 at 06:45
  • 4
    I don't think the number will *wrap around* if the value is over 2147483647... I think it's more likely that browsers will just treat any number over this value as a constant value, e.g. 0. – m-smith Aug 17 '12 at 12:53
  • 4
    Maybe your value just become negative... For example -2147483647 – impropositum Apr 26 '13 at 07:35
  • 3
    In modern browsers going over 2147483648 does not move the elements behind other elements – Zach Saucier Apr 29 '14 at 18:09
29

Out of experience, I think the correct maximum z-index is 2147483647.

Mohammad
  • 7,344
  • 15
  • 48
  • 76
  • 13
    Seems like you are wrong. According the tests made in 2009 by Eric Poidokas, the max z-index value (without risk of dropping elements on overflow) is 2147483647. – Martin Sep 27 '14 at 09:02
25

It's the maximum value of a 32 bits integer: 2147483647

Also see the docs: https://www.w3.org/TR/CSS22/visuren.html#z-index (Negative numbers are allowed)

magikMaker
  • 4,929
  • 1
  • 33
  • 25
21

It depends on the browser (although the latest version of all browsers should max out at 2147483638), as does the browser's reaction when the maximum is exceeded.

Viktor
  • 4,218
  • 4
  • 32
  • 63
pdr
  • 6,372
  • 1
  • 29
  • 38
19

Conclusion Maximum z-index value is 2,147,483,647 and more than this convert to 2,147,483,647

‌Browser Maximum More Than Maximum
Chrome >= 29 2,147,483,647 2,147,483,647
Opera >= 9 2,147,483,647 2,147,483,647
IE >= 6 2,147,483,647 2,147,483,647
Safari >= 4 2,147,483,647 2,147,483,647
Safari = 3 16,777,271 16,777,271
Firefox >= 4 2,147,483,647 2,147,483,647
Firefox = 3 2,147,483,647 0
Firefox = 2 2,147,483,647 Bug: tag hidden

All Values tested in BrowserStack.

Behnam
  • 6,244
  • 1
  • 39
  • 36
17

Z-Index only works for elements that have position: relative; or position: absolute; applied to them. If that's not the problem we'll need to see an example page to be more helpful.

EDIT: The good doctor has already put the fullest explanation but the quick version is that the minimum is 0 because it can't be a negative number and the maximum - well, you'll never really need to go above 10 for most designs.

roborourke
  • 12,147
  • 4
  • 26
  • 37
  • 5
    I've used "z-index:-1;" before to "sink" an element so it can't be clicked. It's probably not a popular solution, but it does work. :P – Ty. Jan 30 '09 at 15:00
  • 19
    I know this is a bit late, but it works with position:fixed as well. – TCCV Jul 13 '10 at 04:58
  • 8
    AFAIK, you can have negative integers for the z-index value. – d-_-b May 10 '12 at 23:51
  • I wonder why I specify z-index:1000, but browser told me actual z-index is auto. position does the trick. – Will Wu Jan 09 '13 at 05:11
7

I have found that often if z-index isn't working its because its parent/siblings don't have a specified z-index.

So if you have:

<div id="1">
    <a id="2" style="z-index:2"></a>
    <div id="3" style="z-index:1"></div>
    <button id="4"></button>
</div>

item #3, or even #4, may be contesting #2 for the click/hover space, though if you set #1 to z-index 0, the siblings who's z-index put them in independant stacks now are in the same stack and will z-index properly.

This has a helpful and fairly humanized description: http://foohack.com/2007/10/top-5-css-mistakes/  

Kristaps Karlsons
  • 482
  • 1
  • 7
  • 22
kcar
  • 833
  • 9
  • 15
5

A user above says "well, you'll never really need to go above 10 for most designs."

Depending on your project, you may only need z-indexes 0-1, or z-indexes 0-10000. You'll often need to play in the higher digits...especially if you are working with lightbox viewers (9999 seems to be the standard and if you want to top their z-index, you'll need to exceed that!)

Rocky
  • 51
  • 1
  • 1
4

There are two super easy ways to write maximal and minimal value for z-index using calc().

Maximal Value

To write maximal value, do this:

.my-element {
    z-index: calc(9e999);
}

Minimal Value

To write minimal value, do this:

.my-element {
    z-index: calc(-9e999);
}

calc() Browser compatibility (<number> value support) table

Browser Minimal Version
Firefox 49
Safari 7
IE 9
Opera 18
Chrome 31
Edge 12
NNL993
  • 372
  • 4
  • 11
0

While INT_MAX is probably the safest bet, WebKit apparently uses doubles internally and thus allows very large numbers (to a certain precision). LLONG_MAX e.g. works fine (at least in 64-Bit Chromium and WebkitGTK), but will be rounded to 9223372036854776000.

(Although you should consider carefully whether you really, really need this many z indices…).

Creshal
  • 493
  • 1
  • 4
  • 15
0

Do NOT use max/min value, simply try:

1. Organize HTML tag order

 Topic Bad Good
Desc Use z-index to organize stacking order Use original order of HTML tags to organize stacking order
Screenshot  a  b
Online DEMO https://jsbin.com/zanijac/edit?html,output https://jsbin.com/gakeqix/edit?html,output

2. Create new The stacking context to isolate z-index

  Topic Bad Good
Desc Use z-index: max || min to override the other tag Use fixed z-index: 0 to isolate The stacking context
Screenshot  bad  good
Online DEMO https://jsbin.com/lavofef/edit?html,output https://jsbin.com/qakegup/edit?html,output

You don't need z-index

z-index is dangerous:

  • It is infectious: If one tag gets z-index, more tags will be infected in order to override the old one.
  • It will inflate: If one tag gets z-index: 1;, more tags will have to use z-index: 2;, z-index: 3; ... z-index: max || min;, Boom!.

Use z-index: max || min; is especially dangerous. If one tag gets z-index: max , it will be hard to override by others, the whole project will out of control gradually.

Junior Tour
  • 439
  • 7
  • 8