## Tarefa
Criar uma barra de navegação do site que permaneça **fixa no topo** da página da web para que os usuários possam acessá-la a qualquer momento.
Etapas:
1. Aplicar posicionamento `fixed` à lista de navegação.
2. Selecionar uma propriedade para deslocamento horizontal (`left` ou `right`).
3. Selecionar uma propriedade para deslocamento vertical (`top` ou `bottom`).
4. Testar a funcionalidade clicando em diferentes links e garantindo que a página role mantendo a barra de navegação visível.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDx1bCBjbGFzcz0ibmF2aWdhdGlvbiI+CiAgICAgIDxsaSBjbGFzcz0ibmF2aWdhdGlvbi1pdGVtIj4KICAgICAgICA8YSBocmVmPSIjaG9tZSIgY2xhc3M9Im5hdmlnYXRpb24tbGluayI+SG9tZTwvYT4KICAgICAgPC9saT4KICAgICAgPGxpIGNsYXNzPSJuYXZpZ2F0aW9uLWl0ZW0iPgogICAgICAgIDxhIGhyZWY9IiNhYm91dCIgY2xhc3M9Im5hdmlnYXRpb24tbGluayI+QWJvdXQ8L2E+CiAgICAgIDwvbGk+CiAgICAgIDxsaSBjbGFzcz0ibmF2aWdhdGlvbi1pdGVtIj4KICAgICAgICA8YSBocmVmPSIjcHJpY2UiIGNsYXNzPSJuYXZpZ2F0aW9uLWxpbmsiPlByaWNlPC9hPgogICAgICA8L2xpPgogICAgICA8bGkgY2xhc3M9Im5hdmlnYXRpb24taXRlbSI+CiAgICAgICAgPGEgaHJlZj0iI3RlYW0iIGNsYXNzPSJuYXZpZ2F0aW9uLWxpbmsiPlRlYW08L2E+CiAgICAgIDwvbGk+CiAgICA8L3VsPgogICAgPHNlY3Rpb24gY2xhc3M9InNlY3Rpb24iIGlkPSJob21lIj4KICAgICAgPGgyIGNsYXNzPSJzZWN0aW9uLXRpdGxlIj5Ib21lIHNlY3Rpb248L2gyPgogICAgICA8cCBjbGFzcz0idGV4dCI+CiAgICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gVGVtcG9yYQogICAgICAgIHBvc3NpbXVzIHByYWVzZW50aXVtIG9wdGlvIHBlcmZlcmVuZGlzIHRlbXBvcmlidXMgc3VzY2lwaXQgZWEgYXQgbmVtbwogICAgICAgIGRvbG9ydW0gZXNzZSBzZWQgdWxsYW0gc3VudCwgZW9zIHJhdGlvbmUgaXBzYW0gdm9sdXB0YXRpYnVzIG1pbmltYQogICAgICAgIG1heGltZSBhcGVyaWFtIGhhcnVtIGFkaXBpc2NpIG1hZ25hbS4gRWFxdWUgbmVxdWUsIGVuaW0gaXVzdG8gdmVsIHVuZGUKICAgICAgICBxdW8gaXVyZSBtYWduaSwgc2ltaWxpcXVlIHBlcmZlcmVuZGlzIGRvbG9yZW0sIGFyY2hpdGVjdG8gcGFyaWF0dXIgZXJyb3IKICAgICAgICBibGFuZGl0aWlzIG5lY2Vzc2l0YXRpYnVzLiBVdCBhbGlhcyBpbmNpZHVudCBkb2xvcmlidXMgdGVtcG9yYSBpdXN0bwogICAgICAgIGV4cGxpY2FibyBtb2xsaXRpYSBjdXBpZGl0YXRlIHZvbHVwdGF0aWJ1cyBxdWlidXNkYW0gcmVpY2llbmRpcwogICAgICAgIHZvbHVwdGF0ZSBhdCBpcHN1bSByYXRpb25lIGN1bXF1ZSBjb21tb2RpIGRlYml0aXMgZW9zIHBvc3NpbXVzLCBub3N0cnVtCiAgICAgICAgY29ycG9yaXMgbmVzY2l1bnQgbnVsbGEhCiAgICAgIDwvcD4KICAgIDwvc2VjdGlvbj4KICAgIDxzZWN0aW9uIGNsYXNzPSJzZWN0aW9uIiBpZD0iYWJvdXQiPgogICAgICA8aDIgY2xhc3M9InNlY3Rpb24tdGl0bGUiPkFib3V0IHNlY3Rpb248L2gyPgogICAgICA8cCBjbGFzcz0idGV4dCI+CiAgICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gQWxpcXVhbSByZXJ1bQogICAgICAgIHNpbWlsaXF1ZSBhY2N1c2FudGl1bSBwb3JybywgZGVsZWN0dXMgZG9sb3JlbXF1ZSBvZmZpY2lhIGRvbG9yZW0gYXBlcmlhbQogICAgICAgIGFzcGVyaW9yZXMgbGF1ZGFudGl1bSBwYXJpYXR1ciB0ZW1wb3JlIGFsaXF1aWQgdG90YW0gcXVvIGF0PyBRdWlidXNkYW0KICAgICAgICBuaXNpIGRpZ25pc3NpbW9zIG9mZmljaWEgZnVnYSB2b2x1cHRhdHVtIGludmVudG9yZSBkb2xvciwgb2RpbyBleCBxdWlkZW0KICAgICAgICBuYXR1cyBlc3QgaW1wZWRpdC4gUXVpZGVtIGN1bXF1ZSBwZXJmZXJlbmRpcyBpbmNpZHVudCBjdW0gcG9ycm8sCiAgICAgICAgZXhwbGljYWJvIGZhY2lsaXMgcXVhbSByZXBlbGxlbmR1cyBpdXN0byBpZCBwbGFjZWF0IGF1dCBpc3RlIGFkaXBpc2NpCiAgICAgICAgb21uaXMgdmVybyBpdGFxdWUgZGViaXRpcywgcmVydW0sIG9wdGlvIHJlY3VzYW5kYWUgbW9sZXN0aWFzIHF1aXMKICAgICAgICBtb2xlc3RpYWUuIEludmVudG9yZSB2b2x1cHRhdGVzIG51bGxhIHNlcXVpIHNhcGllbnRlIHRlbXBvcmlidXMgZmFjaWxpcwogICAgICAgIGRvbG9yZW1xdWUgbmVxdWUgY29ycnVwdGkgdGVtcG9yZSBhIHJlaWNpZW5kaXMgZXVtIHZlbGl0LCBldCBhbmltaQogICAgICAgIGV4cGxpY2FibyBuYW0gZWFxdWUgYWIgdm9sdXB0YXRlIGV2ZW5pZXQgbm9uIGFkaXBpc2NpIGZ1Z2l0IGF0LiBRdWlkZW0sCiAgICAgICAgcGxhY2VhdCBuaXNpLgogICAgICA8L3A+CiAgICA8L3NlY3Rpb24+CiAgICA8c2VjdGlvbiBjbGFzcz0ic2VjdGlvbiIgaWQ9InByaWNlIj4KICAgICAgPGgyIGNsYXNzPSJzZWN0aW9uLXRpdGxlIj5QcmljZSBzZWN0aW9uPC9oMj4KICAgICAgPHAgY2xhc3M9InRleHQiPgogICAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0IGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIFZlbCB0ZW1wb3JpYnVzCiAgICAgICAgcmVwcmVoZW5kZXJpdCB2b2x1cHRhdHVtIGRvbG9yaWJ1cyBpbmNpZHVudCBsYXVkYW50aXVtISBRdW9zIGlsbG8KICAgICAgICBub3N0cnVtIGFyY2hpdGVjdG8gZHVjaW11cyBleHBsaWNhYm8sIHZvbHVwdGFzIHV0IGVhcnVtIHZlcm8uCiAgICAgICAgQ29uc2VxdWF0dXIgY29ycG9yaXMgcXVvZCBleGVyY2l0YXRpb25lbSBhdXRlbSBjb25zZWN0ZXR1ciBhdHF1ZQogICAgICAgIGFkaXBpc2NpIHZlcm8sIGlzdGUgY3VtcXVlIGFtZXQgZG9sb3Jlcy4gQXV0IG1hZ25pIHJlaWNpZW5kaXMgc3VudAogICAgICAgIGRlc2VydW50IGltcGVkaXQgZHVjaW11cyBpcHN1bSBhbGlxdWlkIHVsbGFtIG9kaXQgdG90YW0gbmFtIG9tbmlzCiAgICAgICAgZG9sb3JlbXF1ZSBmdWdpdCwgb3B0aW8gc2VxdWkgcmVwdWRpYW5kYWUsIGV4cGxpY2FibyBwcmFlc2VudGl1bQogICAgICAgIHBvc3NpbXVzIGN1cGlkaXRhdGUgbmVjZXNzaXRhdGlidXMgbW9kaSBpbnZlbnRvcmUgYWNjdXNhbnRpdW0gbWFnbmFtCiAgICAgICAgbmloaWwuCiAgICAgIDwvcD4KICAgIDwvc2VjdGlvbj4KICAgIDxzZWN0aW9uIGNsYXNzPSJzZWN0aW9uIiBpZD0idGVhbSI+CiAgICAgIDxoMiBjbGFzcz0ic2VjdGlvbi10aXRsZSI+VGVhbSBzZWN0aW9uPC9oMj4KICAgICAgPHAgY2xhc3M9InRleHQiPgogICAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBOZXF1ZSBhZCwKICAgICAgICBuZXNjaXVudCB2b2x1cHRhcyBhYiBmYWNpbGlzIHNvbHV0YSBxdW9kIHJlcGVsbGF0IGlkPyBPbW5pcyBpbmNpZHVudAogICAgICAgIG9mZmljaWEgc3VzY2lwaXQgZGViaXRpcyByZXB1ZGlhbmRhZSBtb2xsaXRpYSBtYXhpbWUuIFNpbWlsaXF1ZSBtb2RpCiAgICAgICAgdm9sdXB0YXRlbSwgZG9sb3JlbXF1ZSBlaXVzIHByb3ZpZGVudCBwbGFjZWF0IHF1YWVyYXQgbm9iaXMsIHJlaWNpZW5kaXMKICAgICAgICBxdWFzIHJlcGVsbGF0IHJlcGVsbGVuZHVzIGVvcyBjdW1xdWUgb3B0aW8gY29ycnVwdGkgYWIgc2FwaWVudGUKICAgICAgICBtb2xlc3RpYXMgZXNzZSBwb3JybyBzZWQgcGFyaWF0dXIgYmxhbmRpdGlpcyBxdWFtLiBDdW0sIG9tbmlzPyBFcnJvcgogICAgICAgIHByb3ZpZGVudCBtb2xlc3RpYXMgaXN0ZSBhZD8gUXVpIHNhcGllbnRlIHRvdGFtIG9iY2FlY2F0aSBpcHN1bS4KICAgICAgPC9wPgogICAgPC9zZWN0aW9uPgogIDwvYm9keT4KPC9odG1sPg==

Lm5hdmlnYXRpb24gewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBwYWRkaW5nOiAxMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICNkNjQzNDM7CiAgd2lkdGg6IDEwMCU7Cn0KCi5uYXZpZ2F0aW9uIHsKICAvKiAtLS0tLS0tLS0tLS0tLS0gTWFrZSBjaGFuZ2VzIGJlbG93IHRoaXMgbGluZSAtLS0tLS0tLS0tLS0tLS0gKi8KICBwb3NpdGlvbjogX19fOwogIF9fXzogX19fOwogIF9fXzogX19fOwogIC8qIC0tLS0tLS0tLS0tLS0tLSBNYWtlIGNoYW5nZXMgYWJvdmUgdGhpcyBsaW5lIC0tLS0tLS0tLS0tLS0tLSAqLwp9CgovKiBOb3QgdGhlIGN1cnJlbnQgZm9jdXMgKi8KKiB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQoKaHRtbCB7CiAgc2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7Cn0KCi5zZWN0aW9uIHsKICBtYXJnaW46IDAgYXV0bzsKICBwYWRkaW5nOiAyMHB4IDMwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogbGlnaHRibHVlOwp9Cgouc2VjdGlvbjpub3QoOmxhc3QtY2hpbGQpIHsKICBtYXJnaW4tYm90dG9tOiAzMHB4Owp9Cgp1bCB7CiAgcGFkZGluZy1sZWZ0OiAwOwogIG1hcmdpbi10b3A6IDA7CiAgbWFyZ2luLWJvdHRvbTogMDsKICBsaXN0LXN0eWxlOiBub25lOwp9CgoubmF2aWdhdGlvbi1pdGVtOm5vdCg6bGFzdC1jaGlsZCkgewogIG1hcmdpbi1yaWdodDogMzBweDsKfQoKLm5hdmlnYXRpb24tbGluayB7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwogIGNvbG9yOiByZ2IoMjEyLCAyMDMsIDEyMCk7Cn0KCi5zZWN0aW9uLXRpdGxlIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgY29sb3I6IGRhcmtncmVlbjsKfQoKLnRleHQgewogIGZvbnQtc2l6ZTogMThweDsKICB0ZXh0LWFsaWduOiBqdXN0aWZ5Owp9

1. Defina a propriedade `top` como `0` para manter a navegação no topo da página web.
2. Para o posicionamento horizontal, utilize `left: 0;` para alinhar à borda esquerda da janela de visualização ou `right: 0;` para alinhar à borda direita.

Lm5hdmlnYXRpb24gewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBwYWRkaW5nOiAxMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICNkNjQzNDM7CiAgd2lkdGg6IDEwMCU7Cn0KCi5uYXZpZ2F0aW9uIHsKICBwb3NpdGlvbjogZml4ZWQ7CiAgdG9wOiAwOwogIGxlZnQ6IDA7Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwoqIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9CgpodG1sIHsKICBzY3JvbGwtYmVoYXZpb3I6IHNtb290aDsKfQoKLnNlY3Rpb24gewogIG1hcmdpbjogMCBhdXRvOwogIHBhZGRpbmc6IDIwcHggMzBweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiBsaWdodGJsdWU7Cn0KCi5zZWN0aW9uOm5vdCg6bGFzdC1jaGlsZCkgewogIG1hcmdpbi1ib3R0b206IDMwcHg7Cn0KCnVsIHsKICBwYWRkaW5nLWxlZnQ6IDA7CiAgbWFyZ2luLXRvcDogMDsKICBtYXJnaW4tYm90dG9tOiAwOwogIGxpc3Qtc3R5bGU6IG5vbmU7Cn0KCi5uYXZpZ2F0aW9uLWl0ZW06bm90KDpsYXN0LWNoaWxkKSB7CiAgbWFyZ2luLXJpZ2h0OiAzMHB4Owp9CgoubmF2aWdhdGlvbi1saW5rIHsKICB0ZXh0LWRlY29yYXRpb246IG5vbmU7CiAgY29sb3I6IHJnYigyMTIsIDIwMywgMTIwKTsKfQoKLnNlY3Rpb24tdGl0bGUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKICBjb2xvcjogZGFya2dyZWVuOwp9CgoudGV4dCB7CiAgZm9udC1zaXplOiAxOHB4OwogIHRleHQtYWxpZ246IGp1c3RpZnk7Cn0=

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: Trabalhar com Posicionamento Fixo

Tarefa

Awesome!

Desafio: Trabalhar com Posicionamento Fixo

Tarefa