8 lines
941 B
Plaintext
8 lines
941 B
Plaintext
---
|
|
title: Is there any reason you'd want to use `translate()` instead of `absolute` positioning, or vice-versa? And why?
|
|
---
|
|
|
|
`translate()` is a possible value of the CSS `transform` property. When using `translate()`, the element still occupies its original space (sort of like `position: relative`). But when changing the absolute positioning of elements, the elements are removed from the flow of the page and the positioning of the surrounding elements will be affected. Hence the page layout will have to be recalculated.
|
|
|
|
Changing `transform` or `opacity` does not trigger browser reflows or repaints but does trigger compositions; On the other hand, changing the absolute positioning triggers `reflow`. `transform` causes the browser to create a GPU layer for the element but changing absolute positioning properties uses the CPU. Hence `translate()` is more efficient and will result in shorter paint times for smoother animations.
|