Qual é a diferença entre um elemento com posicionamento `relative`, `fixed`, `absolute` e `static`?
Topics
CSS
Edit on GitHub
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 propriedadestop
,right
,bottom
,left
ez-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 posicionadorelative
até atravessar um limite específico, momento em que é tratado como posicionadofixed
.