I need an explanation on how the following CSS code works???Help guys.

Question

position: relative;
top: 50px;
left: 50px;
transform: translate (-50%,-50%);

Answer 1

Thank you very much, that was helpful 😊

Answer 2

position: relative;
Allows this element to be moved around, while keeping surrounding elements behaving as though it were still in the same position (resulting in empty space if you move it).

top: 50px;
Moves the element 50 pixels AWAY from its top side (so it would move downwards).

left: 50px;
Similarly, 50 pixels away from its left side (the element moves to the right).

transform: translate(-50%,-50%);
Keep in mind that the origin of x and y axis (0,0) is at the upper left of the screen. Therefore, smaller numbers are closer to the origin and larger numbers will move away from it.

The first value refers to the element's x or horizontal axis, the second being y or vertical.

Thus, this moves the element to the left and up by 50% of its own dimensions (half of its width and height)