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 .divClass
onclick <asp:hyperlink>
usando o jQuery.
display: none
em seu CSS?Respostas:
fonte
2,147,483,647 = 2^31 - 1
,. É um primo de Mersenne.http://www.w3.org/TR/CSS21/visuren.html#z-index
http://www.w3.org/TR/CSS21/syndata.html#numbers
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)
fonte
log base 2 (lg) = lg(16777271)
16777216
.16777271
exigirá, portanto, 25 bits.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ê digitarz-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-index
propriedade, porque eles se espalham.fonte
O valor mínimo do índice Z é 0 ; o valor máximo depende do tipo de navegador.
fonte
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/
fonte
É o valor máximo de um número inteiro de 32 bits: 2147483647
Consulte também os documentos: https://www.w3.org/TR/CSS22/visuren.html#z-index (números negativos são permitidos)
fonte
Por experiência, acho que o máximo correto
z-index
é 2147483638.fonte
O Z-Index funciona apenas para elementos que os têm
position: relative;
ou seposition: 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.
fonte
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:
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/
fonte
position: relative;
ou algo parecido.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!)
fonte
Embora
INT_MAX
seja provavelmente a aposta mais segura, o WebKit aparentemente usa duplas internamente e, portanto, permite números muito grandes (com certa precisão).LLONG_MAX
por 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 ...).
fonte