12 lines
1.4 KiB
Plaintext
12 lines
1.4 KiB
Plaintext
---
|
|
title: Qual é a diferença entre um elemento com posicionamento `relative`, `fixed`, `absolute` e `static`?
|
|
---
|
|
|
|
Um elemento posicionado é um elemento cuja propriedade `position` calculada é `relative`, `absolute`, `fixed` ou `sticky` calculada.
|
|
|
|
- `static`: A posição padrão; o elemento irá fluir na página como normalmente faria. As propriedades `top`, `right`, `bottom`, `left` e`z-index` não se aplicam.
|
|
- `relative`: A posição do elemento é ajustada em relação a si mesma, sem mudar de layout (deixando assim uma lacuna para o elemento onde ele teria sido se não tivesse sido posicionado).
|
|
- `absolute`: O elemento é removido do fluxo da página e posicionado em uma posição específica em relação ao ancestral posicionado mais próximo se houver, ou em relação ao bloco inicial de contêiner. Caixas posicionadas absolutamente podem ter margens e não se sobrepõem com outras margens. Esses elementos não afetam a posição de outros elementos.
|
|
- `fixed`: O elemento é removido do fluxo da página e posicionado em uma posição específica em relação à janela de visualização e não se move quando a página é rolada.
|
|
- `sticky`: O posicionamento "sticky" é um híbrido de posicionamento relativo e fixo. O elemento é tratado como posicionado `relative` até atravessar um limite específico, momento em que é tratado como posicionado `fixed`.
|