Two dimensional (x, y) coordinates or three dimensional (x, y, z) coordinates are used to indicate the location of a pixel in a graphics context.
Dimensions and Origin
x-coordinate
indicates the location on the horizontal axis
y-coordinate
indicates the location on the vertical axis
z-coordinate
indicates the position along views - to - screen axis.
z-axis coordinates are handled differently for showing a graphic shape in 3d or for rendering layers of elements one on top of the other in the 2d mode.
z-index
property is used to decide which element will be shown above or below other overlapping elements. The element with the lowest z-index is recognized as the topmost layer and will be shown above all others.
Origin
The position of each point is defined relative to a fixed point in the context. This fixed point is called Origin.
In a browser, the default point of origin is the top-left corner of the context. The point below this origin is moves in the positive y direction and to the left of the origin moves in the positive x direction.
Graphic Contexts
CSSOM (CSS Object Model) maintains coordinates on 4 graphics contexts...
When a browser renders a page, the coordinates of each pixel is maintains in 4 contexts.
Offset for Elements
The position of the pixel within the element is called its Offset
. ie. if it is the point along the x and y axes when we consider the top-left point of the element as the origin.
Client for Viewport
The part of the browser dedicated to displaying the webpage being being rendered is known as the Viewport
. The location of a pixel with reference to the viewport is called its position on the Client
.
The viewport is generally a part of the screen and displays a part of the webpage. If the page is bigger than the viewport, scrollbars are used to control which part of the page is visible in the viewport.
Page
Page is the entire rendered document. Any coordinate on the page coordinate system will always be same...
- no matter how much it has been scrolled.
- no matter where it is visible to the user or not.
By default, Page
coordinates give the position where the top-left corner of the page is considered the origin.
Screen
Screen is the entire physical device on which the document is presented. A single point on the Screen will correspond to the different points on the Viewport if the Viewport is moved.
Coordinates in Event Handling
MouseClick Event
-
MouseClick.OffsetX
andMouseClick.OffsetY
-
MouseClick.ClientX
andMouseClick.ClientY
-
MouseClick.PageX
andMouseClick.PageY
-
MouseClick.ScreenX
andMouseClick.ScreenY
These coordinates are generally used in Javascript to find-out where the user clicked the mouse while browsing and respond accordingly.
Touch Event
-
Touch.ClientX
andTouch.ClientY
-
Touch.PageX
andTouch.PageY
-
Touch.ScreenX
andTouch.ScreenY
These coordinates are generally used in Javascript to find-out where the user touched on the screen.
Transform the coordinates
CSS provides properties that allow you to alter the position of the axis for coordinates of elements i.e. the coordinates of certain elements can be transformed.
The transform operations supported are...
transform-origin
rotate
scale
translate
skew
perspective
Some of the transformations work in 3d mode also. The transform
property is used to deliver some of the most render some of the popular animation sequences in CSS.
Top comments (0)