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로 지정되어 있다면 결과는 동일하다. 하지만 %의 경우 다르게 동작한다.