[220414_TIL] css transform vs positioning

css에서 element의 위치를 변경하는 방법 중에 transform과 positioning(top, left..) 가 있다. 둘 다 육안으로 보이는 결과화면은 같지만, 어떤 상황에서 무엇을 쓰는 게 더 적절할지 알아보려고 한다. 또, 둘이 차이점도 같이 알아보자. 전체 코드

결과 화면

바로 결과 화면부터 보자면, 위와 같다. 3가지 모두 세번째에 있는 박스를 왼쪽 아래로 50px씩 내리려고 했다.

.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; 
}

코드는 위와 같고 아래 두개는 둘다 positioning이지만 전자는 relative, 후자는 absolute 이다.

비교

레이아웃

좀 더 확실하게 보기 위해 개발자도구에서 Flexbox로 본 화면이다.

transform의 경우 3번째 박스가 원래의 그 자리는 차지하고 있고, 정말 위치만 바뀐것을 볼 수 있다. 박스가 속한 레이아웃은 변하지 않고, 요소 자체의 위치만 바꿀 수 있다.

positioning 으로 이동한 박스는 박스가 이동함에 따라 레이아웃 자체자 바뀌었다.

positioning absolute 이동하여 박스 위치가 부모요소 기준으로 완전히 독립적이게 되어, 레이아웃을 벗어난 상태가 되었다.

목적

absolute : 포지셔닝
translate : 디자인 모션

둘다 위치를 조정하지만, 보통 transform은 애니메이션에 자주 사용된다. 단순히 위치만 조정한다면 보통 transform을 쓰고 좀 더 명확하게 목적성이 있게 하려면 position을 쓰라는 의미 같다.

성능

absolute : CPU 처리 (reflow나 repaint 발생)
translate : GPU 처리

transform 을 애니메이션에 주로 사용하는 이유가 있다. translate는 GPU 에서 처리되기 때문에, 복잡한 애니메이션은 CPU에 부담이 될수 있고, GPU에서 이를 처리하면 positioning 보다 빠르다.

다른점

이동시키려는 위치가 px로 지정되어 있다면 결과는 동일하다. 하지만 %의 경우 다르게 동작한다.

• position 50% : 왼쪽 가장자리로부터 전체 너비의 50% 이동
• transform 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/