Skip to content

Commit

Permalink
Clarify Z-axis in context of CSS coordinates (mdn#20321)
Browse files Browse the repository at this point in the history
* chore: 3367 - clarify z-axis for CSS positioning

* Update files/en-us/web/css/cssom_view/coordinate_systems/index.md

Co-authored-by: Jean-Yves Perrier <[email protected]>

Co-authored-by: Jean-Yves Perrier <[email protected]>
  • Loading branch information
bsmth and teoli2003 authored Sep 5, 2022
1 parent 8df6405 commit 7b99580
Showing 1 changed file with 3 additions and 2 deletions.
5 changes: 3 additions & 2 deletions files/en-us/web/css/cssom_view/coordinate_systems/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,10 @@ tags:
- Layout
- NeedsContent
---

{{CSSRef}}

When specifying the location of a pixel in a graphics context (just like when specifying coordinate systems in [algebra](https://en.wikipedia.org/wiki/Algebra)), its position is defined relative to a fixed point in the context. This fixed point is called the [origin](https://en.wikipedia.org/wiki/Origin_(mathematics)). The position is specified as the number of pixels offset from the origin along each dimension of the context.
When specifying the location of a pixel in a graphics context (just like when specifying coordinate systems in [algebra](https://en.wikipedia.org/wiki/Algebra)), its position is defined relative to a fixed point in the context. This fixed point is called the [origin](<https://en.wikipedia.org/wiki/Origin_(mathematics)>). The position is specified as the number of pixels offset from the origin along each dimension of the context.

This guide describes the standard coordinate systems used by the CSS object model. These are generally only different in terms of where their origin is located.

Expand All @@ -23,7 +24,7 @@ In the coordinate systems used by web technologies, convention dictates that the

On the web, the default origin is the _top_-left corner of a given context (with positive y-coordinate values being below the origin). Note that this is unlike most mathematical models, where the origin is at the _bottom_-left corner, with positive y-coordinate values being above the origin.

When drawing 3D graphics, or using a third dimension to layer objects from front to back, the _z-coordinate_ is also used. This specifies the distance away from the viewer if positive and toward the viewer if negative.
When using the third dimension to layer objects from front to back, we use the z-axis. The z-axis runs from the viewer to the screen's surface. The CSS z-index attribute affects where positioned elements sit on this axis, giving the effect of moving away from or toward the viewer.

> **Note:** It's actually possible to change the definitions and orientations of these coordinate systems using CSS properties such as {{cssxref("transform")}}. However, we'll only talk about the standard coordinate system for now.
Expand Down

0 comments on commit 7b99580

Please sign in to comment.