Menu
For example if we would like to move element up on 50px both examples above kind of work
Example 1
position: relative;
top: -50px;
Example 2
transform: translateY(-50px);
Can you please explain possible difference in future behavior or maybe some nuances that exist?
490
Using translate() will always “nudge” the element from it's current position which is perfect for an effect like this, or really any design-specific motion.
Translate will do a local translation while setting position doesn't account for rotation. Rotate your object and try both methods and you'll see the difference.
position: relative places an element relative to its current position without changing the layout around it, whereas position: absolute places an element relative to its parent's position and changing the layout around it.
The translate() CSS function repositions an element in the horizontal and/or vertical directions. Its result is a <transform-function> data type.
Example 1
can be used in normal case
supported by almost every browser - don't need to rewrite for other browsers
Example 2
136
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
