8-z-index.md

Z-Index

A propriedade z-index funciona como camadas no CSS, por padrão, todos os elementos estão com essa propriedade no 0, quer dizer que todos os elementos estão na camada 0 ou initial.

Exemplo

Aqui temos duas divs:

HTML:

<div class="um"></div>
<div class="dois"></div>

CSS:

.um {
  width: 100px;
  height: 100px;
  background-color: brown;
}

.dois {
  width: 200px;
  height: 200px;
  background-color: chocolate;
}

Caso eu aplique um position: relative; top: 40px; na Div 1:

.um {
  width: 100px;
  height: 100px;
  background-color: brown;
  position: relative;
  top: 40px;
}

Mas eu quero que a Div 2 fique por cima, então eu aplico a propriedade z-index: -1 na Div 1.

  .um {
    width: 100px;
    height: 100px;
    background-color: brown;
    position: relative;
    top: 40px;
    z-index: -1;

Observações

• A propriedade z-index aceita somente valores numéricos, incluindo valores negativos.
• Só é possível aplicar o z-index caso o elemento tenha uma position setada (relative, absolute, fixed ou sticky).
  Por esse motivo aplicamos o z-index na div 1.

Próxima página → Background