Artigo original: The CSS Position Property Explained with Examples

Antes de poder ser muito bom em CSS, você precisa entender o básico. É preciso entender as propriedades do CSS e seus valores.

Neste artigo, nos concentraremos na propriedade position do CSS. Aprenderemos sobre os vários valores dessa propriedade e sobre como eles funcionam. Vamos lá!

O que é a propriedade position do CSS?

A propriedade position do CSS define a posição de um elemento em um documento. Essa propriedade funciona em conjunto com as propriedades left, right, top, bottom e z-index para determinar a posição final de um elemento em uma página.

Existem cinco valores que a propriedade position pode receber. Elas são:

  1. static
  2. relative
  3. absolute
  4. fixed
  5. sticky

Vamos discutir cada uma delas.

Static

Esse é o valor padrão para os elementos. O elemento é posicionado de acordo com o fluxo normal do documento. As propriedades left, right, top, bottom e z-index não afetam um elemento com position: static.

Vamos usar um exemplo para mostrar que position: static não afeta a posição de um elemento. Colocamos três elementos div em um contêiner (elemento pai). Usaremos esse mesmo exemplo pelo resto do artigo.

<html>
	<body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
            
            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
            
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>

Vamos adicionar position: static à div com a classe main-element e valores para left e top para ela. Também adicionaremos alguns estilos às outras divs para diferenciá-las do elemento importante.

.main-element {
    position: static;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

.sibling-element {
    padding: 10px;
    background-color: #f2f2f2;
}

Este é o resultado.

Percebeu que não há mudança? Isso confirma o fato de que as propriedades left e bottom não afetam um elemento com a position: static.

Vamos passar para o próximo valor.

Relative

Elementos com a position: relative permanecem no fluxo normal do documento. Porém, diferente dos elementos com a posição estática, left, right, top, bottom e z-index afetam a posição do elemento. Um deslocamento, com base nos valores das propriedades left, right, top e bottom, é aplicado ao elemento relativo a si mesmo.

Vamos substituir position: static por position: relative em nosso exemplo.

.main-element {
    position: relative;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

Perceba que as propriedades left e bottom agora afetam a posição do elemento. Veja, também, que o elemento permanece no fluxo normal do documento e que o deslocamento é aplicado com relação a si mesmo. Preste atenção a isso ao passarmos para os outros valores.

Absolute

Elementos com position: absolute são posicionados em relação aos seus elementos pai. Nesse caso, o elemento é removido do fluxo normal do documento. Os outros elementos se comportarão como se aquele elemento não estivesse no documento. Não é criado um espaço para o elemento no layout da página. Os valores de left, top, bottom e right determinam a posição final do elemento.

Outra coisa que merece ser observada é que um elemento com position: absolute é posicionado com relação ao seu ancestral posicionado mais próximo. Isso quer dizer que o elemento pai precisa ter um valor de position diferente de position: static.

Se o elemento pai mais próximo não estiver posicionado, ficará posicionado com relação ao elemento pai mais próximo que estiver posicionado. Se não houver elemento ancestral posicionado, sua posição será relativa ao elemento <html>.

Vamos voltar ao nosso exemplo. Nesse caso, mudamos a posição do elemento principal para position: absolute. Daremos ao seu elemento pai o valor position: relative para que main não fique posicionado com relação ao elemento <html>.

.main-element {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

.parent-element {
    position: relative;
    height: 100px;
    padding: 10px;
    background-color: #81adc8;
}

.sibling-element {
	background: #f2f2f2;
	padding: 10px;
    border: 1px solid #81adc8;
}

Este é o resultado.

Observe que não é criado um espaço no documento para o elemento. Ele agora está posicionado relativo ao elemento pai. Preste atenção enquanto passamos para o próximo valor.

Fixed

Elementos com position: fixed são semelhantes aos elementos com position: absolute. Eles também são removidos do fluxo normal do documento. Porém, diferente daqueles com position: absolute, eles ficam sempre posicionados em relação ao elemento <html>.

Algo importante de se observar é que elementos com position: fixed não são afetados pela rolagem. Eles sempre permanecem na mesma posição na tela.

.main-element {
    position: fixed;
    bottom: 10px;
    left: 10px;
    background-color: yellow;
    padding: 10px;
}

html {
    height: 800px;
}

Nesse caso, o elemento é posicionado com relação ao elemento <html>. Experimente usar a barra de rolagem para ver que o elemento permanece fixo na tela.

Vamos passar agora para o valor final.

Sticky

position: sticky é uma mistura de position: relative e position: fixed. Ele age posicionado relativamente até determinado ponto de rolagem. Então, ele age como um elemento com position: fixed. Não se preocupe se você não entende o que isso significa. O exemplo ajudará você a entender melhor.

.main-element {
    position: sticky;
    top: 10px;
    background-color: yellow;
    padding: 10px;
}

.parent-element {
    position: relative;
    height: 800px;
    padding: 50px 10px;
    background-color: #81adc8;
}

Faça a rolagem na guia Result para ver o resultado. Você perceberá que ele age como um elemento relativo até que chegamos a determinado ponto da tela, top: 10px. Então, ele passa a se comportar como um elemento fixo.

Resumo

Opa! Essa foi uma viagem e tanto. Espero realmente que este artigo tenha ajudado você a entender a propriedade position do CSS e como ela funciona.

Fique à vontade para brincar com os exemplos caso não tenha entendido completamente algum deles. Você pode mudar os valores e perceber as diferenças ou, melhor ainda, tentar usar a propriedade position para trabalhar em um projeto pessoal.

Lembre-se de que melhorar no CSS requer prática constante. Por isso, mantenha-se na prática e você melhorará. Agradecemos pela leitura! 😀