Antes de aprender sobre position, é essencial compreender algumas propriedades de display. Embora sejam conceitos distintos, o display influencia diretamente no comportamento dos elementos em relação ao posicionamento.
A propriedade display define como um elemento é renderizado na página, ou seja, como ele irá interagir com os demais elementos da página: se ele ocupa toda a largura disponível (block), flui junto com o texto (inline), ou combina essas características (inline-block). Essa escolha afeta como o elemento interage com outros elementos e como o posicionamento se aplica a ele.
Vale ressaltar que display não altera o comportamento do position, mas define a base sobre a qual o position atuará. Ou seja, o tipo de display de um elemento determina seu comportamento padrão, e o position modifica esse comportamento conforme necessário. Além disso, essa propriedade é complexa e possui uma série de valores que podem ser aplicados além dos que serão abordados aqui.
Veja abaixo as 3 formas de display que aprenderemos nessa matéria:
Display block: como o nome sugere, é um bloco que, naturalmente, possui altura e largura definidas pelo conteúdo ou pelo CSS. Além disso, força uma quebra de linha antes e depois do elemento, ocupando toda a faixa horizontal disponível da tela, independentemente de sua largura(width) ser menor que o espaço disponível.
Display inline: o elemento flui junto com o texto, como uma palavra, ocupando apenas o espaço necessário
Display inline-block: combina os dois: o elemento pode ser dimensionado com largura e altura (como um bloco), mas flui horizontalmente com outros elementos.
Observações importantes:
Quando usamos inline ou inline-block, é possível notar que ficam espaços em branco indesejados entre os elementos. Isso acontece porque o espaçamento equivale a um caractere e, como tal, os espaços em branco no HTML são renderizados normalmente. Uma solução comum é usar word-spacing: -20px (ou valores negativos) para "colar" os elementos. No entanto, eles nunca se sobrepõem, apenas ficam justapostos.
Perceba também que quando usamos inline, o elemento desconsidera completamente a largura e altura definidas pelo CSS. Neste caso, está definido 100px para cada dimensão.
Além disso, você pode aplicar as mesmas propriedades de alinhamento de texto, como text-align: center, que usaria em textos normais, para alterar o alinhamento dos elementos inline ou inline-block.
Position Static
Position static é o posicionamento padrão de todos os elementos HTML. Quando você não define nenhuma propriedade de position em um elemento, ele automaticamente recebe position: static. Nesse caso, o elemento segue o fluxo normal do documento, ou seja, aparece exatamente onde deveria estar de acordo com a ordem em que foi escrito no HTML.
As propriedades left, top, right e bottom não funcionam com position static, pois não há nada a deslocar — o elemento já está em seu lugar natural. Esse é o comportamento mais previsível e é a base sobre a qual todos os outros tipos de posicionamento funcionam.
Position fixed
O position fixed é um tipo de posicionamento que fixa o elemento em uma posição específica na tela, independentemente do scroll. Isso significa que, mesmo quando o usuário rola a página para baixo ou para cima, o elemento permanece visível e fixo em sua posição original.
Esse tipo de posicionamento é comumente usado para criar elementos como barras de navegação, botões de ação ou rodapés que devem permanecer visíveis o tempo todo, independentemente da posição do usuário na página.
Exemplo: clique em "Ativar" para visualizar o elemento com position fixed e, em seguida, role a página para observar seu comportamento. Note que o elemento permanece fixo na tela, independentemente do scroll.
Position Sticky
O position sticky é um tipo de posicionamento que combina características do position relative e do position fixed. Ele permite que um elemento se comporte como relativo até atingir um determinado ponto de rolagem, momento em que ele se torna fixo na tela.
Isso significa que o elemento com position sticky permanecerá em sua posição normal no fluxo do documento até que o usuário role a página para um ponto específico, definido pelas propriedades top, right, bottom ou left. Quando esse ponto é alcançado, o elemento "gruda" na posição definida e permanece visível enquanto o usuário continua rolando a página.
Exemplo: role a página para baixo e observe o comportamento do elemento verde.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae ipsa sequi, fuga quaerat, necessitatibus iure totam dolorum magnam illo blanditiis corporis eum sed quas fugiat expedita, placeat nihil quod id!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem praesentium quam sit quasi quibusdam consequuntur iste nam nostrum labore similique nihil ex perferendis quod, maiores tenetur, earum eum perspiciatis. Explicabo.lorem ipsum dolor sit amet consectetur adipisicing elit. Rem praesentium quam sit quasi quibusdam consequuntur iste nam nostrum labore similique nihil ex perferendis quod, maiores tenetur, earum eum perspiciatis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit dicta eveniet quisquam vero vitae perspiciatis optio, architecto tempora explicabo adipisci ullam atque commodi similique eius nihil voluptate est aspernatur quam.
Diferente do position fixed, o position sticky só se torna fixo quando atinge o ponto definido pelas propriedades top, right, bottom ou left.
Além disso, o position sticky é afetado pelo fluxo normal do documento. Isso significa que, quando está dentro de um contêiner, o elemento permanecerá visível apenas dentro dos limites desse contêiner. Quando o contêiner sair da tela durante o scroll, o elemento sticky também desaparecerá.
Position Relative
O box de um elemento com position: relative é colocado em uma posição relativa a sua posição natural(static). As propriedades left, top, right e bottom são utilizadas para determinar o deslocamento entre a posição desejada e a posição natural.
O espaço que essa box ocuparia, se ele estivesse em sua posição natural, não poderá ser ocupado por nenhum outro elemento. E a box será projatada para uma posição em primeiro plano acima e será exibida por cima de qualquer outro elemento
Observações importantes
Espaço físico: O espaço físico permanece em sua posição original. Apenas a projeção visual do elemento é deslocada.
Interações: As interações como cliques ou efeitos ao passar o mouse funcionam na projeção visual do elemento, não em seu espaço físico original.
Problemas desse posicionamento
Espaço em branco: Como o espaço natural não é ocupado por outro elemento, ficará um espaço vazio no bloco, o que pode ficar esteticamente feio ou estranho.
Sensível a modificações: Como esse posicionamento projeta sua imagem para outro plano, ele poderá gerar efeitos estranhos caso seja feita qualquer modificação no futuro. Por exemplo, se mudar o tamanho do contêiner, o bloco pode se sobrepor a outro bloco, sair da tela ou ficar mal posicionado.
Position: absolute;
O position: absolute funciona de forma diferente dependendo do contexto em que está inserido. Especificamente, o comportamento de um elemento com posicionamento absoluto varia conforme a propriedade position de seu contêiner pai.
Existem dois cenários principais:
Contêiner sem position definida (ou com position: static): Quando o elemento está dentro de um contêiner que não possui position definida, o elemento absoluto se posiciona em relação à página inteira, não ao contêiner que o envolve.
Contêiner com position definida (diferente de static): Quando o contêiner pai possui uma propriedade position como relative, absolute, fixed ou sticky, o elemento absoluto se posiciona em relação aos limites desse contêiner, não da página.
Vejamos agora esse comportamento na prática:
Conteiner com position: static
Nesse exemplo, o box verde, que tem position: absolute, se posiciona em relação à página inteira, não ao contêiner que o envolve. Isso significa que ele pode se sobrepor a outros elementos da página ou ficar fora do contêiner, dependendo de onde for posicionado.
Conteiner com position: relative
Nesse exemplo, o box verde, que tem position: absolute, se posiciona em relação ao contêiner que o envolve, que tem position: relative. Isso significa que ele ficará dentro dos limites do contêiner e não se sobreporá a outros elementos da página, a menos que seja posicionado de forma a fazê-lo.
Observe que os demais elementos dentro do contêiner não reconhecem o espaço ocupado pela caixa com position absolute, pois ela foi removida do fluxo normal do documento.