Guia para a propriedade position
- b7web
- Sem categoria
- jan 31, 2022
Position, uma das propriedades mais complicadas de se entender do CSS, por isso hoje vamos abordar os seus usos, e entender como cada tipo de position funciona.
Aviso
E antes de prosseguirmos para o conteúdo principal deste artigo, ele irá utilizar alguns estilos de forma recorrente, então para que você, leitor, não se sinta perdido, já vou deixa-los de antemão aqui no início do artigo para que você já os tenha caso queira ler este artigo acompanhando os exemplos. Os estilos:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
font-family: "Courier New", Courier, monospace;
font-size: 100%;
}
body {
background: #222;
padding: 2em;
}
.box {
background: #ddd;
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
padding: 1em;
}
Para que serve o position?
A propriedade position serve para definir como um elemento vai ser posicionado na página. Onde seus valores (static, relative, absolute, etc…) definem quem vai ser o ponto de refêrencia para as propriedades top, left, right e bottom, os quais vamos usar para definir a posição desse elemento.
Valores possíveis
Position possui 5 valores possíveis:
- static
- relative
- absolute
- fixed
- sticky
Static
O position static, é basicamente dizer o mesmo que sem position, é o valor padrão para os elementos no HTML, quando colocamos um elemento como static, isso quer dizer que as propriedades inset (top, left, right e bottom, vou utilizar inset para me referir a elas ao longo deste artigo, pois inset é o nome da propriedade shorthand delas, assim como background é para background-color, e etc…) e o z-index não afetam esse elemento (logo poderíamos colocar um top: 1000px e o elemento não se mexeria nem um píxel). Esse faz com que o elemento simplesmente siga o fluxo padrão do documento.
Relative
Esse position faz com que o ponto de referência seja o próprio elemento com position relative. Logo as propriedades inset movem o elemento de forma equivalente as propriedades margin. Tome por exemplo o seguinte HTML com o seguinte CSS:
<div id="exemplo-01" class="box">1</div>
#exemplo-01 {
position: relative;
}
E vamos ter uma tela semelhante a essa:
Se nós aplicarmos a propriedade top por exemplo, então pelo position atual ser relative, o ponto de referência é o próprio elemento, por isso o top vai representar o valor entre o elemento e a borda de cima (border-top) original dele, logo se aplicarmos algo como top: 400px o resultado vai ser o seguinte:
Absolute
Até então o position não parece ter trazido nada de mais para nós, mas ele começa a demonstrar a sua utilidade agora, com o position: absolute, pois com o ele, o ponto de referência passa a ser o elemento ancestral mais próximo com qualquer position que não seja o static (relative, outro absolute, fixed ou sticky), o que significa que se tivermos um HTML assim:
<div>
<div style="position: relative">
<div style="position: absolute"></div>
</div>
</div>
A div do meio que vai ser o ponto de referência da última, porém se fizermos o HTML assim:
<div style="position: relative">
<div>
<div style="position: absolute"></div>
</div>
</div>
A primeira div vai ser o ponto de referência para a última. Lembrando que se não tiver nenhum elemento com outro position não static ao longo da árvore de elementos, a tag html é tomada como referência.
Então vamos começar a demonstrar isso com o seguinte HTML:
<div class="parent">
<div id="exemplo-02" class="box"></div>
</div>
E inicialmente vamos colocar o seguinte CSS nele:
.parent {
position: relative;
background: #f00;
height: 400px;
}
#exemplo-02 {
position: absolute;
}
O resultado vai ser o seguinte:
Então podemos dizer que a nossa div.box vai se mexer em 50%, assim o código ficaria assim:
.parent {
position: relative;
background: #f00;
height: 400px;
}
#exemplo-02 {
position: absolute;
left: 50%;
}
E nossa tela assim:
E para provar que ele se mexe em relação a div vermelha (que é o elemento ancestral mais próximo que possui o position: relative), vamos diminuir a largura dela em 50%, logo nossos estilos vão ficar:
.parent {
position: relative;
background: #f00;
width: 50%;
height: 400px;
}
#exemplo-02 {
position: absolute;
left: 50%;
}
E podemos confirmar que na nossa tela a div que tinha o position: absolute, continua sendo posicionada com 50% do tamanho da div vermelha entre a borda esquerda da div vermelha e a borda esquerda da div cinza:
Fixed
Já pensou em como aqueles menus fixos são criados? Pois é, eles são criados com esse position daqui. O ponto de referência dele é a própria tela, e é por isso que ele se mantém fixo nela independente da rolagem dá página. Como ele é bem simples, nosso exemplo será igualmente simples:
<div class="scroll"></div>
<nav id="exemplo-03" class="box"></nav>
.scroll {
min-height: 200vh;
}
#exemplo-03 {
position: fixed;
top: 0;
}
Note a barra de rolagem já avançada demonstrando que ele se manteve no topo durante a rolagem.
Sticky
O mais novo membro da familía position, e também o mais complicado de todos de se entender, ele mesmo: o position: sticky. Imagine se nós pudessemos combinar o position: relative e o position: fixed em um só position? É exatamente isso que o position: sticky faz. Ele se mantém em relative até chegar em um ponto definido pelos valores de suas propriedades inset, e após passar dessa marca ele fica fixo na tela assim como o fixed.
Ele usa como referência o elemento ancestral com uma barra de rolagem mais próximo, e se não tiver nenhum ele usa a própria página. Porém ele tem outra referência que é o seu elemento pai, o elemento pai define quando ele sai do modo fixed e volta a acompanhar a rolagem da página, pois quando ele fica fixo até chegar na outra borda do seu elemento pai, se ele passar dos limites do seu elemento pai ele volta a acompanhar o fluxo do documento. Logo vamos começar com o exemplo mais simples:
O top nesse exemplo é a distancia que o elemento deve estar da tela quando a scrollbar estiver rolando para que ele se torne fixed, então como tem a div laranja fazendo um espaço entre a nossa caixa e o topo, ele fica fixo quando ele chega ao topo da página.
Agora vamos complicar um pouco nosso exemplo para ver uma particularidade do position sticky, vamos colocar nossa div.box dentro de uma outra div e ver como ela se comporta:
Perceba que agora o nosso exemplo já não funciona mais. E isso acontece pois o nosso elemento sticky só pode ficar fixo em cima de outros elementos irmãos a ele, e como nesse caso ele é o único filho da div, ele não tem ninguém para fixar-se em cima, logo ele fica como relative por todo o tempo. Então para confirmar isso vamos colocar algum conteúdo do lado do nosso elemento para que ele possa ter em quem passar por cima.
Agora ele voltou a funcionar, agora que tem conteúdo para que ele possa passar por cima, ele fica fixo enquanto os seus elementos irmãos estiverem ocupando espaço, e quando já não tiver mais nenhum irmão para ele passar por cima, ele volta ser relative. Uma analogia é pensar no position: sticky como um elemento que vai pular todos os irmãos dele, então ele fica na posição dele até chegar no ponto demarcado pelas propriedades inset correspondentes, ai ele pula todos os irmãos que tiverem ocupando espaço (como nós estavamos usando o top: 0 ele vai pular todos os irmãos após ele, mas no caso do bottom: 0; ele pularia os que estivessem atrás) e quando eles acabarem ele volta ao chão, ou seja, volta a ser relative.