## Tarefa
Crie um fundo visualmente atraente para o site utilizando uma ilustração composta por 5 imagens diferentes. Todas as imagens devem estar corretamente posicionadas dentro do quadro do elemento pai `div`. Sua tarefa é ajustar a ordem de sobreposição utilizando a propriedade `z-index` para alcançar o resultado desejado conforme ilustrado na imagem abaixo:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxpbWcKICAgICAgICBjbGFzcz0ic3VuIgogICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2FkdmFuY2VkK2Nzcyt0ZWNobmlxdWVzL3Bvc2l0aW9uaW5nK3NlY3Rpb24vc3VuLnBuZyIKICAgICAgICBhbHQ9InN1biIKICAgICAgICB3aWR0aD0iMTYwcHgiCiAgICAgIC8+CiAgICAgIDxpbWcKICAgICAgICBjbGFzcz0iYmlyZHMiCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYWR2YW5jZWQrY3NzK3RlY2huaXF1ZXMvcG9zaXRpb25pbmcrc2VjdGlvbi9iaXJkcy5wbmciCiAgICAgICAgYWx0PSJiaXJkcyIKICAgICAgICB3aWR0aD0iMTMwcHgiCiAgICAgIC8+CiAgICAgIDxpbWcKICAgICAgICBjbGFzcz0iY2xvdWQiCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYWR2YW5jZWQrY3NzK3RlY2huaXF1ZXMvcG9zaXRpb25pbmcrc2VjdGlvbi9jbG91ZC5wbmciCiAgICAgICAgYWx0PSJjbG91ZHMiCiAgICAgICAgd2lkdGg9IjM0MHB4IgogICAgICAvPgogICAgICA8aW1nCiAgICAgICAgY2xhc3M9ImZyb2ciCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYWR2YW5jZWQrY3NzK3RlY2huaXF1ZXMvcG9zaXRpb25pbmcrc2VjdGlvbi9mcm9nLS5wbmciCiAgICAgICAgYWx0PSJmcm9nIgogICAgICAgIHdpZHRoPSI2MHB4IgogICAgICAvPgogICAgICA8aW1nCiAgICAgICAgY2xhc3M9InBvbmQiCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYWR2YW5jZWQrY3NzK3RlY2huaXF1ZXMvcG9zaXRpb25pbmcrc2VjdGlvbi9wb25kLnBuZyIKICAgICAgICBhbHQ9InBvbmQiCiAgICAgICAgd2lkdGg9IjM0MHB4IgogICAgICAvPgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

aW1nIHsKICBwb3NpdGlvbjogYWJzb2x1dGU7Cn0KCi5wb25kIHsKICBib3R0b206IC02MHB4OwogIHJpZ2h0OiAtMjBweDsKfQoKLyogLS0tLS0tLS0tLS0tLS0tIE1ha2UgY2hhbmdlcyBiZWxvdyB0aGlzIGxpbmUgLS0tLS0tLS0tLS0tLS0tICovCi5iaXJkcyB7CiAgdG9wOiA3MHB4OwogIGxlZnQ6IDIwcHg7CiAgX19fOiBfX187IC8qIENoYW5nZSB0aGlzIGxpbmUgKi8KfQoKLmNsb3VkIHsKICB0b3A6IC0xMzBweDsKICBsZWZ0OiAtMzVweDsKfQoKLnN1biB7CiAgcmlnaHQ6IDQwcHg7CiAgX19fOiBfX187IC8qIENoYW5nZSB0aGlzIGxpbmUgKi8KfQoKLmZyb2cgewogIGJvdHRvbTogNzVweDsKICByaWdodDogMTMwcHg7CiAgX19fOiBfX187IC8qIENoYW5nZSB0aGlzIGxpbmUgKi8KfQovKiAtLS0tLS0tLS0tLS0tLS0gTWFrZSBjaGFuZ2VzIGFib3ZlIHRoaXMgbGluZSAtLS0tLS0tLS0tLS0tLS0gKi8KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwouY29udGFpbmVyIHsKICBtYXJnaW46IDAgYXV0bzsKICB3aWR0aDogNDAwcHg7CiAgaGVpZ2h0OiA0MDBweDsKICBib3JkZXI6IDJweCBzb2xpZCBkYXJrYmx1ZTsKICBib3JkZXItcmFkaXVzOiAxMHB4OwogIG92ZXJmbG93OiBoaWRkZW47CiAgcG9zaXRpb246IHJlbGF0aXZlOwogIGJveC1zaGFkb3c6IDBweCAtMXB4IDdweCA0cHggcmdiYSgxNzksIDE0MCwgMTc5LCAwLjc2KTsKfQ==

Para alterar a ordem de empilhamento das imagens dentro do elemento pai `div`, utilize a propriedade `z-index`. Um valor de `z-index` mais alto, como `1`, eleva o elemento acima dos outros no contexto de empilhamento, tornando-o visível em primeiro plano.

aW1nIHsKICBwb3NpdGlvbjogYWJzb2x1dGU7Cn0KCi5wb25kIHsKICBib3R0b206IC02MHB4OwogIHJpZ2h0OiAtMjBweDsKfQoKLmJpcmRzIHsKICB0b3A6IDcwcHg7CiAgbGVmdDogMjBweDsKICB6LWluZGV4OiAxOwp9CgouY2xvdWQgewogIHRvcDogLTEzMHB4OwogIGxlZnQ6IC0zNXB4Owp9Cgouc3VuIHsKICByaWdodDogNDBweDsKICB6LWluZGV4OiAxOwp9CgouZnJvZyB7CiAgYm90dG9tOiA3NXB4OwogIHJpZ2h0OiAxMzBweDsKICB6LWluZGV4OiAxOwp9CgovKiBOb3QgdGhlIGN1cnJlbnQgZm9jdXMgKi8KLmNvbnRhaW5lciB7CiAgbWFyZ2luOiAwIGF1dG87CiAgd2lkdGg6IDQwMHB4OwogIGhlaWdodDogNDAwcHg7CiAgYm9yZGVyOiAycHggc29saWQgZGFya2JsdWU7CiAgYm9yZGVyLXJhZGl1czogMTBweDsKICBvdmVyZmxvdzogaGlkZGVuOwogIHBvc2l0aW9uOiByZWxhdGl2ZTsKICBib3gtc2hhZG93OiAwcHggLTFweCA3cHggNHB4IHJnYmEoMTc5LCAxNDAsIDE3OSwgMC43Nik7Cn0=

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 o 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.

Desafio: Controlar Z-Index e Sobreposição de Elementos

Tarefa

Desafio: Controlar Z-Index e Sobreposição de Elementos

Tarefa