From 7b9958063e9890462e1898954edc66852801e7cb Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Mon, 5 Sep 2022 20:04:36 +0200 Subject: [PATCH] Clarify Z-axis in context of CSS coordinates (#20321) * 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 Co-authored-by: Jean-Yves Perrier --- files/en-us/web/css/cssom_view/coordinate_systems/index.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/cssom_view/coordinate_systems/index.md b/files/en-us/web/css/cssom_view/coordinate_systems/index.md index b46347cbfa7274d..4e02d68eb5f958b 100644 --- a/files/en-us/web/css/cssom_view/coordinate_systems/index.md +++ b/files/en-us/web/css/cssom_view/coordinate_systems/index.md @@ -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](). 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. @@ -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.