freeCodeCamp/guide/portuguese/css/z-index/index.md

title	localeTitle
Z Index	Índice Z

Índice Z

Z Index ( z-index ) é uma propriedade CSS que define a ordem dos elementos HTML sobrepostos. Elementos com um índice mais alto serão colocados sobre elementos com um índice menor.

Nota : O índice Z só funciona nos elementos posicionados ( position:absolute , position:relative ou position:fixed ).

Valores possíveis

/* Default value if not specified */ 
 z-index: auto; 
 
 /* Integer values */ 
 z-index: 1; 
 z-index: 100; 
 z-index: 9999; 
 z-index: -1; 
 
 /* Global values */ 
 z-index: inherit; 
 z-index: initial; 
 z-index: unset; 

Exemplo de uso

Neste exemplo, você pode ver três caixas exibidas uma em cima da outra em diferentes pedidos usando o z-index .

HTML

<div class="container"> 
  <div class="box" id="blue"></div> 
  <div class="box" id="red"></div> 
  <div class="box" id="green"></div> 
 </div> 

CSS

#blue { 
  background-color: blue; 
 } 
 
 #red { 
  background-color: red; 
 } 
 
 #green { 
  background-color: green; 
 } 

Como o z-index não foi definido, ele terá um valor padrão de auto . Isso é um resultado:

Tente alterar a ordem para verde, azul, vermelho em CSS usando z-index .

#blue { 
  background-color: blue; 
  z-index: 2; 
 } 
 
 #red { 
  background-color: red; 
  z-index: 1; 
 } 
 
 #green { 
  background-color: green; 
  z-index: 3; 
 } 

Seu resultado será:

Use o índice Z se precisar colocar um elemento de plano de fundo abaixo de um contêiner. Você pode facilmente colocar o fundo em cada elemento, dando-lhe um índice Z negativo como abaixo:

#background { 
  z-index: -1; 
 } 

Mais Informações:

https://css-tricks.com/almanac/properties/z/z-index/

https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS Posicionamento / Noções básicas sobre z_index

https://philipwalton.com/articles/what-no-one-told-you-about-z-index/