Qual é a diferença entre um elemento com posicionamento `relative`, `fixed`, `absolute` e `static`?
Topics
CSS
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,leftez-indexnã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 posicionadorelativeaté atravessar um limite específico, momento em que é tratado como posicionadofixed.