[220414_TIL] css transform vs positioning

cssで要素の位置を変更する方法はtransformとpositioning(top,left...)です.あります.どちらも肉眼で見える結果画面ですが、どんな場合に何を書くのが適当か知りたいです.また、両者の違いを一緒に理解してみましょう.完全なコード

結果画面

結果画面から見ると、以上のようになります.3つとも3つ目の箱を左下50 pxにしようとした.

.transform .move-item {
    transform: translate(50px, 50px);
}

.positioning.relative .move-item {
   position: relative;
   top: 50px;
   left: 50px; 
}

.positioning.absolute .move-item {
    position: absolute;
    top: 50px;
    left: 50px; 
}

コードは以下の通りで、次の2つはpositioningですが、前者はrelative、後者はabsoluteです.

比較

レイアウト

もっとはっきり見えるように開発者ツールでFlexboxで見た画面です.

変換の場合、3つ目の箱が元の位置を占めているのが見え、本当に位置だけを変えた.ボックスが属するレイアウトは変更されず、要素自体の位置しか変更できません.

位置に移動した箱は箱が移動するにつれてレイアウト自体も変わっていきます.

[絶対移動位置](Position Absolute Move)親要素のデータムから完全に独立したボックス位置を配置し、レイアウトから離れます.

目的

絶対:位置
translate:アニメーションを設計する
どちらも位置を調整できますが、通常は変換はアニメーションによく使用されます.位置を調整するだけなら、一般的には変換されますが、目的性をより明確にしたいなら、位置を使うべきです.

パフォーマンス:

absolute:CPU処理(リフローまたはペンキ塗り直し)
Translate:GPU処理
変換が主にアニメーションに使用されるのは理由があります.TranslateはGPU上で処理されるため、複雑なアニメーションはCPUに負担をかける可能性があり、GPU上で処理するのは位置決めよりも速い.

相違点

移動する位置がpxと指定されている場合、結果は同じです.ただし%の場合は異なる動作があります.

位置50%:左端から全幅50%の

に移動

変換50%:移動要素サイズ50%、

Refernce

https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

https://mygumi.tistory.com/238

https://blog.tumult.com/2013/02/28/transform-translate-vs-top-left/

https://bbosong-develop.tistory.com/5

https://www.sitepoint.com/atoz-css-translate-vs-position/