Summary  
This chapter explains how the CSS position property (static, relative, absolute, fixed, sticky) and offset properties (top, right, bottom, left) control element placement both inside and outside the normal document flow.

General domain of usage  
Web page UI layout (e.g., pop-ups, modals, mobile menus)

No desenvolvimento web moderno, frequentemente é necessário posicionar elementos fora do fluxo normal, por exemplo, exibindo texto sobre um cartão de produto, abrindo um pop-up ou modal, ou mostrando um menu móvel. Tudo isso é controlado utilizando a propriedade `position`.
```css
position: static | relative | absolute | fixed | sticky
```

A propriedade `position` altera como um elemento é posicionado na página. Por padrão, todo elemento possui `position: static`. Ao alterar para outro valor, também é possível utilizar `top`, `left`, `right` e `bottom` para controlar sua localização exata.
## Fluxo Padrão do Documento
Por padrão, os elementos aparecem na página na mesma ordem em que estão no HTML. Esse fluxo natural deve ser mantido, a menos que o posicionamento seja necessário para comportamentos específicos da interface, como pop-ups, modais, menus suspensos ou menus móveis.

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.

Compreendendo o Posicionamento CSS

Fluxo Padrão do Documento

Compreendendo o Posicionamento CSS

Fluxo Padrão do Documento