> Nota
> 
> Cada desafio neste curso inclui um exemplo de código composto pelos arquivos `index.html` e `index.css`. Como o curso foca no aprendizado de CSS, recomenda-se resolver os desafios no arquivo `index.css`. Após concluir um desafio, clique no botão "Executar Código" para visualizar a página ao vivo e garantir que o desafio foi resolvido corretamente.
>
> Além disso, cada desafio oferece os botões "Dica" e "Solução". Ao clicar no botão "Dica", serão exibidas dicas relevantes para a tarefa atual, enquanto o botão "Solução" revelará o exemplo de código com a aplicação correta do CSS.

## Tarefa
1. Adicionar posicionamento `relative` ao segundo elemento com o nome de classe `item`.
2. Mover o item `30px` para baixo e `50px` para a esquerda.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgoKICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9Iml0ZW0iPjE8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iaXRlbSI+MjwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJpdGVtIj4zPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogLS0tLS0tLS0tLS0tLS0tIE1ha2UgY2hhbmdlcyBiZWxvdyB0aGlzIGxpbmUgLS0tLS0tLS0tLS0tLS0tICovCi5pdGVtOm50aC1jaGlsZCgyKSB7CiAgcG9zaXRpb246IF9fXzsKICB0b3A6IF9fXzsKICBsZWZ0OiBfX187Cn0KLyogLS0tLS0tLS0tLS0tLS0tIE1ha2UgY2hhbmdlcyBhYm92ZSB0aGlzIGxpbmUgLS0tLS0tLS0tLS0tLS0tICovCgovKiBOb3QgdGhlIGN1cnJlbnQgZm9jdXMgKi8KCiogewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KCi5jb250YWluZXIgewogIG1hcmdpbjogMCBhdXRvOwogIG1heC13aWR0aDogMzQwcHg7CiAgYm9yZGVyOiAycHggc29saWQgI2ExYTFhMTsKICBwYWRkaW5nOiAxMHB4OwogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47Cn0KCi5pdGVtIHsKICB3aWR0aDogMTAwcHg7CiAgaGVpZ2h0OiAxMDBweDsKICBib3JkZXItcmFkaXVzOiAxMHB4OwoKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgY29sb3I6IHdoaXRlOwp9CgouaXRlbTpudGgtY2hpbGQoMSkgewogIGJhY2tncm91bmQtY29sb3I6ICM1MDUxNGY7Cn0KCi5pdGVtOm50aC1jaGlsZCgyKSB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzI0N2JhMDsKfQoKLml0ZW06bnRoLWNoaWxkKDMpIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjI1ZjVjOwp9

1. Mover para baixo definindo um valor positivo para a propriedade `top`.
2. Mover para a esquerda definindo um valor negativo para a propriedade `left`.

Lml0ZW06bnRoLWNoaWxkKDIpIHsKICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgdG9wOiAzMHB4OwogIGxlZnQ6IC01MHB4Owp9CgovKiBOb3QgdGhlIGN1cnJlbnQgZm9jdXMgKi8KCiogewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KCi5jb250YWluZXIgewogIG1hcmdpbjogMCBhdXRvOwogIG1heC13aWR0aDogMzQwcHg7CiAgYm9yZGVyOiAycHggc29saWQgI2ExYTFhMTsKICBwYWRkaW5nOiAxMHB4OwogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47Cn0KCi5pdGVtIHsKICB3aWR0aDogMTAwcHg7CiAgaGVpZ2h0OiAxMDBweDsKICBib3JkZXItcmFkaXVzOiAxMHB4OwoKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgY29sb3I6IHdoaXRlOwp9CgouaXRlbTpudGgtY2hpbGQoMSkgewogIGJhY2tncm91bmQtY29sb3I6ICM1MDUxNGY7Cn0KCi5pdGVtOm50aC1jaGlsZCgyKSB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzI0N2JhMDsKfQoKLml0ZW06bnRoLWNoaWxkKDMpIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjI1ZjVjOwp9

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.

Desafio: Aplicar Posicionamento Relativo

Tarefa

Awesome!

Desafio: Aplicar Posicionamento Relativo

Tarefa