How to change an element's position using x and y axis in css?

Question

Hey I want to change an element's position using x and y axis.
How do I change it in css?
Please explain me.

Answer 1

transform: translate()
https://developer.mozilla.org/en-US/docs/Web/CSS/translate

Answer 2

if you want something similar to scale(x ,y) or scaleX(x) or scaleY(y), you can try:

transform: translate(5px, 5px);

or translateX, translateY for axis specific positioning.

Answer 3

Arjun Dawande , yes Bob_Li and Lisa you're right, translate is used for this:
transform: translateX(50px);

Answer 4

position: relative;
left: 50px;
top: 75px;

There are also many other ways, this is the most direct how you can specify the position, relative to the container (parent) element.

https://sololearn.com/compiler-playground/WEAkRVCqgU7T/?ref=app

Answer 5

This IS the way. There is no universal center of reference, the point of x=0 and y=0 is always the top left corner of the parent element.
If you want to draw in a fixed coordinate system, then try canvas. But you will need to learn some javascript to use it.

Keep in mind, that a website can be opened in many types of devices - pc, phone, tablet with different resolutions, and even the user can resize the browser window. So responsive web design rarely uses pixel coordinates these days.

Answer 6

Thank you Bob_Li

Answer 7

Thank Kalab Girma for your answer but I already got the answer which I wanted from Lisa and Bob_Li . Still Thank you for your answer 😊

Answer 8

Hey Tibor Santa I did it but isn't there any way to directly change the values of x and y axis?
Like there is in the scale for example scaleX().

Answer 9

Thank you Lisa I wanted this only.

Answer 10

Arjun Dawande scaleX() does not set the position of the object, but changes the size of its width, for example, transform: scaleX(2); will double the width of the object.

Answer 11

I know it Solo . I was just giving an example that could we change an element's x and y axis like we can change its scale using scaleX() and scaleY()

Answer 12

In CSS, you typically use the "top" and "left" properties to change an element's position using the y-axis and x-axis respectively. Let's go through a brief explanation of how you can change an element's position using the x and y-axis in CSS.

Changing an Element's Position Using the X and Y Axis:

Using the top Property (Y-Axis):
- The top property is used to specify the top position of a positioned element.
- It positions the element relative to the top edge of the containing element or a positioned ancestor.

Using the left Property (X-Axis):
- The left property is used to specify the left position of a positioned element.
- It positions the element relative to the left edge of the containing element or a positioned ancestor.