Propriedade CSS z-index

A propriedade CSS z-index controla a ordem de empilhamento de elementos sobrepostos — qual aparece na frente e qual fica escondido atrás. O nome vem do eixo z imaginário: o eixo x vai da esquerda para a direita, o eixo y de cima para baixo, e o eixo z aponta para fora da tela em sua direção. Um elemento com um z-index maior fica mais perto do observador e cobre elementos com um valor menor.

Esta página explica o que o z-index faz, por que ele só funciona em elementos posicionados, como os contextos de empilhamento determinam quais valores são comparados, e as razões mais comuns pelas quais um z-index "não funciona".

Como o empilhamento funciona

Por padrão, quando elementos se sobrepõem, aquele que aparece mais tarde no código-fonte HTML é pintado por cima. O z-index permite substituir essa ordem explicitamente. Por exemplo, z-index: 10 ficará acima de z-index: 1, independentemente da ordem no código, e valores negativos como z-index: -1 empurram um elemento para trás do seu pai.

Mas o z-index não é uma classificação global. Os valores só são comparados dentro do mesmo contexto de empilhamento. Um contexto de empilhamento é uma camada independente: cada elemento dentro dele é empilhado em relação aos seus irmãos, e o grupo inteiro é então empilhado como uma unidade dentro do contexto pai. A raiz da página (<html>) cria o primeiro contexto de empilhamento, e certas propriedades criam novos contextos (veja abaixo).

Informação

A propriedade z-index não tem efeito em elementos static (o padrão). Ela só se aplica a elementos posicionados — aqueles com position definido como relative, absolute, fixed ou sticky — e a itens flex/grid.

Valor Inicial	auto
Aplica-se a	Elementos posicionados.
Herdado	Não.
Animável	Sim.
Versão	CSS2
Sintaxe DOM	object.style.zIndex = "-1";

Sintaxe

Sintaxe da Propriedade CSS z-index

z-index: auto | number | initial | inherit;

Exemplo da propriedade z-index com valor negativo:

Exemplo da Propriedade CSS z-index com valor negativo

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        position: absolute;
        left: 0;
        top: 10px;
        z-index: -1;
      }
    </style>
  </head>
  <body>
    <h2>Z-index property example</h2>
    <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" width="200" height="100" />
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade z-index com valor positivo:

Exemplo da Propriedade CSS z-index com valor numérico

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #blue,
      #green,
      #grey {
        position: absolute;
        width: 150px;
        height: 150px;
        color: #eee;
        opacity: 0.95;
        padding: 15px;
        line-height: 100px;
        text-align: center;
      }
      #blue {
        z-index: 1;
        background-color: #1c87c9;
        top: 60px;
        left: 50px;
        line-height: 1;
      }
      .black {
        height: 80px;
        width: 160px;
        background-color: #000;
        line-height: 100px;
        bottom: 20px;
        position: absolute;
        z-index: 10;
      }
      #green {
        z-index: 2;
        background-color: #8ebf42;
        top: 100px;
        left: 170px;
      }
      #grey {
        background-color: #666;
        top: 200px;
        left: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Z-index property example</h2>
    <div class="container">
      <div id="blue">
        Blue
        <div class="black">Black</div>
      </div>
      <div id="green">Green</div>
      <div id="grey">Grey</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Aqui as caixas se sobrepõem porque todas estão posicionadas de forma absoluta. A caixa azul (z-index: 1) fica abaixo da caixa verde (z-index: 2), e a caixa cinza não tem z-index, portanto segue a ordem do código-fonte. Note que a caixa preta (z-index: 10) está aninhada dentro da caixa azul: seu z-index: 10 só é comparado com outros filhos do azul, portanto não pode ficar acima da caixa verde mesmo que 10 > 2. Esta é a regra do contexto de empilhamento em ação.

Resultado

Valores

Valor	Descrição	Experimente
auto	O nível de empilhamento da caixa gerada é igual ao do seu pai. Este é o valor padrão desta propriedade.	Experimente »
number	O nível de empilhamento da caixa gerada é especificado por números. Valores negativos são válidos.	Experimente »
initial	Faz a propriedade usar seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.

O que cria um novo contexto de empilhamento

Entender os contextos de empilhamento é a chave para dominar o z-index. Um novo contexto é criado, entre outros, por:

O elemento raiz <html>.
Um elemento posicionado (relative, absolute, fixed, sticky) com um z-index diferente de auto.
Um filho flex ou grid com um z-index diferente de auto.
Um elemento com opacity menor que 1 (veja opacity).
Um elemento com valor de transform, filter, perspective, clip-path ou mask diferente de none (veja transform).
Um elemento com position: fixed ou position: sticky.
Um elemento com isolation: isolate.
Um elemento com will-change definido para uma propriedade que criaria um contexto.

Uma vez que um elemento forma um contexto de empilhamento, o z-index de seus descendentes fica "preso" dentro dele — eles nunca conseguem escapar para competir com elementos fora do pai.

Por que seu z-index "não está funcionando"

Estes são os culpados habituais, em ordem de frequência:

O elemento é static. O z-index é silenciosamente ignorado a menos que position seja relative, absolute, fixed ou sticky (ou o elemento seja um item flex/grid). Defina uma posição primeiro.
Um pai forma um contexto de empilhamento. Um modal com z-index: 9999 ainda pode ficar escondido atrás de outro elemento se seu ancestral estiver em um contexto de menor empilhamento. A solução é aumentar o z-index do ancestral, não do descendente.
Um ancestral tem opacity ou transform. Mesmo um opacity: 0.99 aparentemente inofensivo ou transform: translateZ(0) (frequentemente adicionado para "aceleração por GPU") cria um contexto de empilhamento e pode prender os filhos.
Você está lutando contra a ordem do código. Sem z-index, os elementos que aparecem depois ganham. Reordenar o HTML é às vezes mais simples do que uma corrida armamentista de z-index.

Aviso

Evite "números mágicos" grandes como z-index: 999999. Eles tornam a ordem de empilhamento impossível de raciocinar. Mantenha uma escala pequena e documentada (por exemplo 1, 10, 100, 1000 para conteúdo, menus suspensos, barras fixas e modais).

Exemplo: isolando um contexto de empilhamento

A propriedade isolation: isolate cria um novo contexto de empilhamento sem alterar o posicionamento ou a opacidade. É a maneira mais limpa de conter os valores de z-index de um componente:

.card {
  /* z-index values inside .card now stay inside .card */
  isolation: isolate;
}

Propriedades relacionadas

position — necessária para que o z-index tenha efeito.
opacity — valores abaixo de 1 criam um contexto de empilhamento.
transform — valores diferentes de none criam um contexto de empilhamento.

Prática

O que a propriedade 'z-index' do CSS faz?

Permite que elementos se sobreponham com controle de como eles são empilhados.Altera a cor de um elemento.Decide a ordem de empilhamento para elementos posicionados.Modifica o tamanho de um elemento.É eficaz apenas em elementos posicionados.Manipula o estilo de borda de um elemento.