Não apanhe do Layout - CSS positions (parte 2)
Tags: css, beginners, layout
Published: 2020-09-22 18:48:45

_No post passado falei sobre as posições relativas e absolutas, nesse aqui vamos pra fixed, que geral usa pra aquele navbar colado no teto e sticky, aquela que a galera usa e sempre dá pau._

### Position fixed
Essa propriedade posiciona absolutamente um elemento colocando-o fora do fluxo da página - Colocou um `position: fixed` e seu site inteiro ficou embaixo do elemento? Foi isso que rolou.

Quando posicionamos um elemento com um valor que não seja estático, esse elemento cria um _containing block_, que por sua vez avisa o navegador que é possível posicionar esse elemento pela janela do navegador através das _position handlers_ (left, right, top, bottom). O valor do position define a referência que esse objeto vai utilizar pra se posicionar - se no caso do _absolute_ é o primeiro pai posicionado, o fixed vai se guiar pela página. Por isso que ao colocar um `position: fixed` o `top: 0` será o topo da página.

![Elemento com position fixed no topo da página](https://dev-to-uploads.s3.amazonaws.com/i/nxovcgi4c39kc5ckjrwg.png)

Aposto que ao posicionar aquele _navbar_ houve o trauma dele ficar minúsculo, como se tivessem colocado `width: min-content` nele, certo? Tu resolve rapidinho isso definindo uma largura e altura pra esse elemento. Na dúvida vai aqui uma regra:

> Sempre definam altura e largura pra elementos posicionados absolutamente.

As considerações acima são o bastante pro seu `position: fixed` não dar pau 80% das vezes, mas e os outros 20%?

Há algumas propriedades como `transform` e `filter` que vão deixar seu posicionamento absoluto (absolute, fixed, sticky) triloucos, só um `position: top` pode ter seu comportamento afetado se o seu pai tiver um transform, mesmo sendo um `translateX(0)`.

![Posicionamento de elemento afetado pelo transform](https://dev-to-uploads.s3.amazonaws.com/i/tdzlu73q7d4yw2elqciv.png)

As propriedades `transform` e `perspective `forçam os elementos posicionados absolutamente pra dentro de um containing block, o que pode mudar o objeto de referência que seus elementos posicionados estão utilizando pra fazer as continhas. 

As propriedades `filter`, `opacity` e `will-change` colocam o elemento em uma caixinha chamada _composition layer_ que soca todos os elementos filhos dentro de uma mesma camada e avisa pro navegador pra habilitar aceleração de GPU pra esses elementos, pois filtros e opacidade afetam esses elementos à nível de pixel e will-change avisa pro navegador já ir aquecendo os motores porque o elemento vai ser animado.

Precisa muito aplicar essas propriedades dentro de um container e seu elemento posicionado absolutamente tá dentro dele? Melhor tirar, coloque esses elementos um pai acima se for necessário, principalmente os `position: fixed` da vida, já que eles não respeitam os pais de qualquer forma. Se você REALMENTE precisar  colocar essas propriedades no pai de um elemento com posicionamento fixo, basta pensar que agora ele se comporta como um elemento absoluto.

### Position sticky

Position sticky 'gruda' o elemento num ponto x do viewport e quando esse elemento atinge esse ponto enquanto você dá o scroll ele trava naquele local. Ou seja, um elemento `position: sticky;` com `top: 30px` vai seguir o seu scroll normalmente até ficar fixo 30px abaixo do topo da sua página. Ex:

![Gif com exemplo de elemento com position sticky parando a 30px de distância do topo da pagina](https://dev-to-uploads.s3.amazonaws.com/i/fzahf2ej624zt209wcjn.gif)

O problema é que esse position as vezes não funciona, traumatizando pessoas, separando famílias, contribuindo pro aquecimento global, sabe o que rola? O elemento sticky depende de um container posicionado pra grudar.

![Gif com elemento com position sticky dando pau porque seu pai não foi posicionado](https://dev-to-uploads.s3.amazonaws.com/i/q3vc1cthvwpd0ftttbps.gif)

Cês viram como ele deu uma grudadinha e depois tacou o foda-se? O container em que esses 3 quadradinhos no gif estão não estava posicionado, então o sticky não resistiu.
O position sticky acompanha a posição do pai pra saber em que ponto do fluxo da tela ele vai grudar, sem referência ele fica trilouco e dá esses bugs ai.

Lembrem que ao fazer a mesma coisa com javascript você precisa saber a posição do scroll Y e o offsetTopY do elemento pra calcular o quanto ele se distanciou da posição atual? Então, o sticky faz a mesmíssima conta por debaixo do capô, o que é belo e moral, então:

> Não usem Javascript pra coisas que o CSS faz de graça e com trabalho digno

Ademais, usem sticky, se vocês usarem com o prefix `-webkit` também, a chance de você ser pego num suporte de browser é mínima. Ficou dúvida? Recomendo a leitura do companheiro [Elad Shechter](https://medium.com/@elad/css-position-sticky-how-it-really-works-54cd01dc2d46) que vem com mais detalhes e codepens. Abriu o link e bateu o "Aff, tá em inglês"? Chama no twitter que eu resumo pra ti.
-----------
E isso é tudo sobre positions por enquanto. O próximo post vai ser sobre z-index, se algo não ficou claro ou você quer acrescentar algo no que eu disse, fique à vontade pra comentar ou me chamar no twitter [@lixeletto](https://twitter.com/lixeletto).

Compartilhem com seus amigues positionfóbicos e até a próxima!