Summary  
This chapter covers how to use the CSS z-index property to control the stacking order of positioned elements by assigning integer values, with higher values bringing elements to the front and equal values falling back to source order.

General domain of usage  
Front-end web development

A propriedade `z-index` determina a ordem de empilhamento dos elementos posicionados em uma página web. Ela se aplica apenas a elementos posicionados, ou seja, aqueles com valor de posição `absolute`, `fixed`, `relative` ou `sticky`. Como esses elementos são retirados do fluxo normal do documento, para definir qual deles deve ser exibido acima ou abaixo, especificamos o `z-index`.
```css
z-index: number_without_units
```

Quanto maior o valor da propriedade `z-index`, mais acima o elemento será exibido na tela do usuário.

Vamos praticar. Temos quatro elementos `div` com a classe `box`, cada um estilizado como um quadrado e numerado para representar sua ordem no documento `html`. Os quadrados estão atualmente posicionados um sobre o outro. A tarefa é ajustar a propriedade z-index com os valores corretos para trazer o quadrado 3 para a frente e enviar o quadrado 4 para o fundo.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+MTwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJib3giPjI8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij4zPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+NDwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogV2UgZ2l2ZSBgcG9zaXRpb246IHJlbGF0aXZlYCB0byB0aGUgc3F1YXJlcycgY29tbW9uIGFuY2VzdG9yLiAqLwouY29udGFpbmVyIHsKICB3aWR0aDogMTAwdnc7CiAgaGVpZ2h0OiAxMDB2aDsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KCi8qIFdlIGdpdmUgYHBvc2l0aW9uOiBhYnNvbHV0ZWAgdG8gZWFjaCBzcXVhcmUuICovCi5ib3ggewogIHdpZHRoOiA5MHB4OwogIGhlaWdodDogOTBweDsKICBib3JkZXItcmFkaXVzOiAxMHB4OwoKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CgogIGZvbnQtc2l6ZTogNDRweDsKICBjb2xvcjogYWxpY2VibHVlOwogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKfQoKLyogV2Ugc2V0IGRpZmZlcmVudCBgei1pbmRleGAgdmFsdWVzIHRvIGVhY2ggYm94IGFuZCBzcGVjaWZ5IHRoZWlyIHBvc2l0aW9uLiAqLwouYm94Om50aC1jaGlsZCgxKSB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2U0M2Q0MDsKICB0b3A6IDkwcHg7CiAgbGVmdDogMjBweDsKICB6LWluZGV4OiAyOyAvKiBTcXVhcmUgMSBpcyBzZXQgdG8gbGF5ZXIgMiAqLwp9CgouYm94Om50aC1jaGlsZCgyKSB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzk0Yzk3MzsKICB0b3A6IDIwcHg7CiAgbGVmdDogMTBweDsKICB6LWluZGV4OiAzOyAvKiBTcXVhcmUgMiBpcyBzZXQgdG8gbGF5ZXIgMyAqLwp9CgouYm94Om50aC1jaGlsZCgzKSB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZhYmVjMDsKICB0b3A6IDEwcHg7CiAgbGVmdDogODBweDsKICB6LWluZGV4OiA0OyAvKiBTcXVhcmUgMyBpcyBzZXQgdG8gbGF5ZXIgNCAtIHRoZSBoaWdoZXN0ICovCn0KCi5ib3g6bnRoLWNoaWxkKDQpIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDU3ZGNkOwogIHRvcDogOTBweDsKICBsZWZ0OiA5MHB4OwogIHotaW5kZXg6IDE7IC8qIFNxdWFyZSA0IGlzIHNldCB0byBsYXllciAxIC0gdGhlIGxvd2VzdCAqLwp9

>Nota
>
>Se definirmos o mesmo valor para a propriedade `z-index` em diferentes elementos, o navegador exibirá os elementos na ordem em que aparecem no arquivo `html`.

Qual é o propósito da propriedade `z-index`?

Aprimore suas habilidades de estilização dominando técnicas avançadas de CSS para design web moderno. Posicione e gerencie elementos com precisão utilizando estratégias avançadas de posicionamento. Crie transições suaves e animações envolventes para aprimorar a experiência do usuário. Transforme e manipule elementos para efeitos visuais dinâmicos. Desenvolva designs responsivos que se adaptam a diferentes dispositivos e aprenda a otimizar seu fluxo de trabalho com pré-processadores CSS como Sass.

Descubra o que os alunos podem esperar deste curso avançado de estilização com HTML e CSS. Quais conhecimentos prévios são necessários antes de iniciar o curso? Quais tópicos serão abordados?

Posicione e gerencie elementos nas páginas da web. Aprenda sobre as diferentes propriedades de posicionamento, descubra como usar a ordem de empilhamento para controlar a visibilidade de elementos que se sobrepõem e, por fim, lide com o transbordamento de conteúdo.

Pesquise o poder das transições e aprenda como aprimorar a experiência do usuário. Descubra como animar propriedades de forma suave e gradual, criando transições de estado contínuas.

Aprenda sobre a propriedade animation e como ela pode ser utilizada para criar designs dinâmicos e envolventes. Descubra como criar animações complexas utilizando keyframes e como controlar a animação.

Explore a propriedade de transformação, que permite modificar a aparência e a posição dos elementos em uma página web. Aprenda a dimensionar, rotacionar, inclinar e transladar elementos em duas e três dimensões. Combine múltiplas transformações para criar efeitos mais complexos.

Os princípios e técnicas utilizados no design adaptativo/responsivo visam tornar sites e aplicações acessíveis e visualmente atraentes em diferentes dispositivos, tamanhos de tela e orientações.

Aprenda sobre pré-processadores em CSS e como eles podem ajudar a escrever um código mais eficiente e de fácil manutenção. Compreenda como utilizar pré-processadores para simplificar o fluxo de trabalho e gerar um código CSS mais limpo.

Gerenciamento da Ordem de Empilhamento dos Elementos

Awesome!

Gerenciamento da Ordem de Empilhamento dos Elementos