Valor mínimo e máximo do índice z?

518

Eu tenho uma div na minha página HTML. Estou mostrando essa div com base em alguma condição, mas a div está sendo exibida atrás do elemento HTML onde apontei o cursor do mouse.

Eu tentei todos os valores para o índice z de 0 a 999999. Alguém pode me dizer por que isso está acontecendo?

Existe algum valor mínimo ou máximo da propriedade Z-INDEX do 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>

Estou mostrando e ocultando a div com o .divClassonclick <asp:hyperlink>usando o jQuery.

Sachin Gaur
fonte
O problema provavelmente não tem a ver especificamente com o z-index. Você pode dar um exemplo de HTML e CSS que ilustram o comportamento? Em quais navegadores você está enfrentando isso?
roryf 29/01/09
Apenas por interesse, você pode tentar a mesma coisa sem usar a tabela, apenas algum conteúdo, o link e a div. Coloque também uma cor de fundo na div apenas para ter certeza enquanto estiver desenvolvendo.
roborourke
60
"tentou todo o valor para a propriedade Z-INDEX de 0 - 999999". Acho isso difícil de acreditar.
sampathsris
4
@Krumia eu não fizer isso, ele poderia tentar todos os valores z-index entre 0-999999 com JS ... Apenas uma opção ...
FullyHumanProgrammer
4
Ninguém realmente mencionou isso display: noneem seu CSS?
Mark Baijens

Respostas:

386
┌──────────────────────┬───────────────────┬──────────────────────────────────┐
│ 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                       │
└──────────────────────┴───────────────────┴──────────────────────────────────┘
Behnam Mohammadi
fonte
4
Eu acredito que ele quer dizer negativo.
Gavin
41
Como você os encontrou?
2540625
Algum número para o Safari / Chrome / Firefox para celular?
2540625
30
Para os interessados 2,147,483,647 = 2^31 - 1,. É um primo de Mersenne.
Reggie Pinkham
2
@BehnamMohammadi, Qual deveria ser o comportamento padrão?
Pacerier 12/09
306

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

'z-index'

Valor : auto | <integer> | herdar

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

Alguns tipos de valores podem ter valores inteiros (indicados por <integer>) ou valores numéricos reais (indicados por <number>). Números reais e números inteiros são especificados apenas em notação decimal. Um <integer> consiste em um ou mais dígitos "0" a "9". Um <número> pode ser um <integer> ou pode ter zero ou mais dígitos seguidos por um ponto (.) Seguido por um ou mais dígitos. Tanto números inteiros quanto números reais podem ser precedidos por um "-" ou "+" para indicar o sinal. -0 é equivalente a 0 e não é um número negativo.

Observe que muitas propriedades que permitem um número inteiro ou real como valor na verdade restringem o valor a algum intervalo, geralmente a um valor não negativo.

Portanto, basicamente, não há limitações para o valor do índice z no padrão CSS, mas acho que a maioria dos navegadores o limita a valores de 32 bits assinados (-2147483648 a +2147483647) na prática (64 seria um pouco fora do topo, e não faz sentido usar nada menos que 32 bits hoje em dia)

Tamas Czinege
fonte
17
É importante observar que o valor máximo do índice z no Safari 3 era 16777271. Isso foi elevado para o padrão de 32 bits no Safari 4, portanto, é apenas uma preocupação se você estiver direcionando navegadores mais antigos. Além disso, mesmo no Safari 3, qualquer coisa acima de 16777271 é limitada, portanto, a menos que você esteja usando valores absurdamente grandes de z-index para solicitar vários elementos, não deverá ter problemas (por exemplo, definir um elemento para um valor de z-index de 2147483647 garantirá que o elemento permaneça no topo de qualquer navegador, a menos que esteja competindo com outro elemento que também tenha um índice z> 16777271).
Doktor J
6
@DoktorJ Alguém sabe por que é 16777271? Parece bizarro que seja 56 a mais do que o limite de um número inteiro não assinado de 24 bits.
Jools
2
@Jools acordo com webkit dev Eric Seidel , que foi o resultado do uso de um campo de bits de 24 bits -log base 2 (lg) = lg(16777271)
Janosch
2
@ Janosch Desculpe, eu não entendo. lg (16777271) é maior que 24. Eu teria pensado que um campo de bits de 24 bits não era grande o suficiente.
Jools
@Janosch, 2 ^ 24 = 16777216. 16777271exigirá, portanto, 25 bits.
Pacerier 12/09/17
157

Meus testes mostram que esse z-index: 2147483647é o valor máximo, testado no FF 3.0.1 para OS X. Descobri um erro de estouro inteiro: se você digitar z-index: 2147483648(que é 2147483647 + 1), o elemento ficará atrás de todos os outros elementos. Pelo menos o navegador não falha.

E a lição a aprender é que você deve tomar cuidado ao inserir valores muito grandes para a z-indexpropriedade, porque eles se espalham.

Correu
fonte
57
Porque este (2147483647) é o maior valor positivo de um inteiro assinado em um sistema operacional de 32 bits ...
Badr Hari
4
Eu não acho que o número será contornado se o valor for maior que 2147483647 ... Eu acho que é mais provável que os navegadores tratem qualquer número desse valor como um valor constante, por exemplo, 0.
oliver-clare
3
Talvez o seu valor fique negativo ... Por exemplo, -2147483647
Wahyu Fahmy 26/13
3
Em navegadores modernos passando por cima 2147483648 não se move os elementos por trás de outros elementos
Zach Saucier
25

O valor mínimo do índice Z é 0 ; o valor máximo depende do tipo de navegador.

insira a descrição da imagem aqui

Santosh Khalse
fonte
4
Na verdade, o índice z pode ser um número negativo. Os elementos posicionados com índices z negativos são ordenados primeiro em um contexto de empilhamento, para que apareçam atrás de todos os outros elementos. Consulte também os documentos: w3.org/TR/CSS22/visuren.html#z-index
magikMaker
17
Fácil de copiar e colar: 2147483647
candlejack
O índice Z pode ser um número negativo, mas, por exemplo, o Safari para iOS 11.0.2 tem um problema com essa propriedade.
kris_IV
Santosh, onde você conseguiu esses números? Você copiou da resposta de Behnam e adicionou o IE7 e o IE8?
precisa saber é o seguinte
21

Depende do navegador (embora a versão mais recente de todos os navegadores deva atingir o limite máximo em 2147483638), assim como a reação do navegador quando o máximo é excedido.

http://www.puidokas.com/max-z-index/

pdr
fonte
21

Por experiência, acho que o máximo correto z-indexé 2147483638.

Mohammad
fonte
7
Parece que você está errado. De acordo com os testes efectuados em 2009 por Eric Poidokas, o valor de índice z max (sem risco de elementos caindo sobre transbordamento) é 2147483647.
Martin
14

O Z-Index funciona apenas para elementos que os têm position: relative;ou se position: absolute;aplicam a eles. Se esse não for o problema, precisaremos ver uma página de exemplo para ser mais útil.

EDIT: O bom médico já colocou a explicação mais completa, mas a versão rápida é que o mínimo é 0 porque não pode ser um número negativo e o máximo - bem, você nunca precisará ir além de 10 para a maioria dos designs.

roborourke
fonte
5
Eu usei "z-index: -1;" antes de "afundar" um elemento para que ele não possa ser clicado. Provavelmente não é uma solução popular, mas funciona. : P
Ty.
17
Sei que é um pouco tarde, mas funciona com a posição: fixo também.
TCCV 13/07/10
7
AFAIK, você pode ter números inteiros negativos para o valor do índice z.
precisa
Gostaria de saber por que especifico o z-index: 1000, mas o navegador me disse que o z-index real é automático. posição faz o truque.
Will Wu
6

Eu descobri que frequentemente se o z-index não está funcionando, porque seus pais / irmãos não têm um z-index especificado.

Então, se você tem:

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

o item nº 3 ou até o nº 4 pode estar contestando o nº 2 pelo espaço de clicar / passar o mouse, embora se você definir o nº 1 no z-index 0, os irmãos que o z-index os colocam em pilhas independentes agora estão na mesma pilha e z-indexará corretamente.

Isso tem uma descrição útil e bastante humanizada: http://foohack.com/2007/10/top-5-css-mistakes/  

kcar
fonte
4
Enquanto estamos no assunto, outro problema comum é não ter position: relative;ou algo parecido.
Ryan Taylor
1
Na verdade, basta reler a postagem original. Você está certo, isso provavelmente é problema dele.
Ryan Taylor
5

Um usuário acima diz "bem, você nunca precisará ir além de 10 para a maioria dos designs".

Dependendo do seu projeto, você pode precisar apenas dos índices z 0-1 ou z-índices 0-10000. Você muitas vezes precisará tocar nos dígitos mais altos ... especialmente se estiver trabalhando com visualizadores de lightbox (o 9999 parece ser o padrão e se você deseja obter o topo do índice z, precisará exceder isso!)

Rochoso
fonte
0

Embora INT_MAXseja provavelmente a aposta mais segura, o WebKit aparentemente usa duplas internamente e, portanto, permite números muito grandes (com certa precisão). LLONG_MAXpor exemplo, funciona bem (pelo menos no Chromium de 64 bits e no WebkitGTK), mas será arredondado para 9223372036854776000.

(Embora você deva considerar cuidadosamente se realmente precisa realmente de muitos índices z ...).

Creshal
fonte