Quando usar translate e posicionamento

Fala aí Tiago, tudo bem? Geralmente eu uso o translate para fazer algumas animações, também vejo a galera por aí usando para a mesma finalidade.

Outro ponto é a performance, com translate a performance é maior porque o translate faz uso da GPU.

Com translate a gente também não precisa se preocupar em quebrar o fluxo da página e a gente não perde uso de margins.

Espero ter ajudado.

Poderia falar mais sobre o último parágrafo, por favor? Eu entendi sobre translate ser usado em animações e sobre o ganho de performance por usar a GPU, mas não entendi sobre quebrar o fluxo da página e não perde uso de margins

Bom, vamos lá:

Quando você aplica um position: absolute você quebra o fluxo estático (static) da página, que por padrão será renderizar os elementos na ordem que foram declarados.

Dá uma olhada nesse exemplo:

https://jsfiddle.net/mahenrique94/73ajr9v8/

Veja que o box foi renderizado em último quando na verdade é o segundo filho, isso porque conta do position: absolute quebrar o fluxo de renderização padrão.

Repare também que ele está sem margin, a mesma não se aplica.

Espero ter ajudado.

Certo, entendi. Mas essas 'vantagens' de nao quebrar o fluxo de renderizacao da pagina e ter margin aplicada acaba nao sendo vista neste exercicio em questao porque ja temos o position: absolute aplicado, certo?

Exato.

Mas como seria feito este efeito sem o uso do position: absolute? Pergunto isso porque o uso de position é predominantemente presente nos sites, então as duas últimas vantagens citadas acima praticamente não existem por este fato, não?

Depende Tiago, essa implementação tem N maneiras de ser feita, segue um exemplo:

https://jsfiddle.net/mahenrique94/eq0yuca1/

Claro que é uma versão simplista, mas, também daria para fazer com JavaScript, etc...

No seu caso, use com position: absolute mesmo e boa, é o que faz mais sentido para o cenário.

Espero ter ajudado.

Entendi, Matheus. Eu perguntei porque parece que, na minha visao leiga, quando queremos trabalhar com posicionamento, utilizamos arbitrariamente a propriedade display. Por isso, me veio essa duvida. No dia a dia de um front-end developer, nao necessariamente utiliza-se a propriedade display? Como seria o dia a dia?

Fala aí Tiago, cara, tudo depende, o mesmo efeito e estilo pode ser feito e N maneiras.

Se um designer mandar um protótipo para mim e para você, o resultado final a gente vai entregar a mesma coisa, mas, os códigos serão completamente diferentes.

No dia a dia, usamos bastante a propriedade display com seus variados valores.

Espero ter ajudado.

Obrigado, Matheus!

Magina, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.