Thread by @lixeletto

E vamos falar sobre as propriedades `position` e como usá-las sem fuder o seu layout e causar traumas pra vida inteira, a thread 🧵

Qual a diferença entre os dois?
Ao definir qualquer position que não static, você habilita os controles de posição (Y: top bottom, X: left right), esses controles começam zerados e com eles você movimenta seu elemento nas dimensões X e Y da página.

A diferença entre relative e absolute é o que é a posição (0, 0) do elemento posicionado.

No caso de `relative`, a posição padrão (0, 0) é o local atual do elemento, à partir do canto superior esquerdo dele. Por isso que ao colocar `position: relative` o elemento n sai do lugar

Quando falamos de `position: absolute`, o valor padrão (0, 0) se refere ao canto superior esquerdo do primeiro elemento pai posicionado. Ou seja, o pai do seu elemento não tem nenhum position (ele é static por padrão), o elemento posicionado como "absoluto" vai procurar um pai...

E caso não encontrar nenhum pai posicionado, o elemento se posicionará de acordo com o body. Por isso que quando alguém define um elemento absoluto sem isso em mente, ele vai lá pra casa do car****, deixando todo mundo traumatizado. Puts, se houvesse um jeito de evitar isso... :/

E TEM, crie uma convenção
Dentro do HTML temos em sua maioria, tags de elementos, controladores e containers. As tags containers são:

header, footer, nav, main, div (Desconsiderei span)

Tendo isso em mente, criemos uma convenção:
containers - relative
elementos - absolute

Uma dificuldade que temos com elementos posicionados absolutamente é que é muito difícil ser responsivo com eles, mesmo usando valores relativos (vw, vh, %, em, etc). Quando chega nesse ponto, algumas pessoas acabam tendo que movimentar no olho as position handlers (top, left...)

Conseguimos posicionar esses elementos de maneira mais prática, performática e sem números mágicos usando a função `transform: translate` pelo fato de que ele move o elemento de acordo com a posição atual, independente do contexto de `position` que você esteja utilizando.

Isso funciona porque pra `left` por exemplo 50% diz respeito a distância do elemento do canto esquerdo da tela. Para o transform, 50% diz respeito a largura do elemento, ou seja, a nossa conta fica

left + larguraEl - ( larguraEl * .5)

Isso significa que o elemento não está só centralizado, mas que também o plano cartesiano da página não é orientado mais pelo canto superior esquerdo, mas pelo centro, permitindo você movimentar o elemento precisamente pela página sem usar números escrotos

Só de você conseguir movimentar o elemento de maneira cartesiana facilita 100% a sua vida. Agora, lembra que a posição é calculada à partir do canto superior ESQUERDO?

Segunda convenção:
NUNCA use `right` pra posicionar um elemento no eixo X

E como ultima dica: elementos dentro de um grid são posicionados DENTRO do contexto do grid de maneira CARTESIANA. Você só precisa definir uma `position` para o pai. Isso significa que dentro de um grid (50%, 50%) é o centro EXATO.

E porque isso é útil?
Na maioria dos layouts, os componentes ficam dentro de um container que por sua vez fica dentro do body (ou é o body), como componentes grandes (sessões inteiras ou views) raramente mudam de posição, mas de orientação OU tamanho, você coloca eles em um grid

E se por um acaso você precisar mover qualquer um desses desgraçadinhos, você não só não vai quebrar o seu layout como vai fazer de forma cartesiana dentro do grid.
Com esse comportamento não funciona com flex, tenha isso em mente na hora de escolher como criar o seu layout.

Se vocês gostarem dessa parada eu escrevo um artigo sobre (na verdade eu vou escrever de qualquer jeito, mas com biscoito é mais gostoso)

AH, AINDA SOBRE GRID;
Lembra que eu falei pra NUNCA usar a propriedade `right` do position? Dentro do grid pode. E tem um caso de uso que se você colocar 0 em todas as propriedades de posicionamento, o elemento vai ocupar 100% do grid;

codepen.io/camilo-michele…

Pra quem não viu eu escrevi o tal do artigo, olha que lindo que fofo

dev.to/lixeletto/nao-…