HOME

TheInfoList



OR:

Z-order is an ordering of overlapping two-dimensional objects, such as
windows Windows is a group of several proprietary graphical operating system families developed and marketed by Microsoft. Each family caters to a certain sector of the computing industry. For example, Windows NT for consumers, Windows Server for ser ...
in a stacking window manager, shapes in a
vector graphics editor A vector graphics editor is a computer program that allows users to compose and edit vector graphics images interactively on a computer and save them in one of many popular vector graphics formats, such as EPS, PDF, WMF, SVG, or VML. Vector ...
, or objects in a 3D application.Foley, James, Andries van Dam, Steven Feiner, and John Hughes. "Computer Graphics: Principle and Practice". Addison-Wesley Publishing Company. Reading, Massachusetts: 1987. pages 870-871 One of the features of a typical GUI is that windows may overlap, so that one window hides part or all of another. When two windows overlap, their Z-order determines which one appears on top of the other.


Definition

The term "Z-order" refers to the order of objects along the Z-axis. In
coordinate geometry In classical mathematics, analytic geometry, also known as coordinate geometry or Cartesian geometry, is the study of geometry using a coordinate system. This contrasts with synthetic geometry. Analytic geometry is used in physics and engineerin ...
, X typically refers to the horizontal axis (left to right), Y to the vertical axis (up and down), and Z refers to the axis perpendicular to the other two (forward or backward). One can think of the windows in a GUI as a series of planes parallel to the surface of the monitor. The windows are therefore stacked along the Z-axis, and the Z-order information thus specifies the front-to-back ordering of the windows on the screen. An analogy would be some sheets of paper scattered on top of a table, each sheet being a window, the table your computer screen, and the top sheet having the highest Z value.


Use

Typically, users of a GUI can affect the Z-order by selecting a window to be brought to the foreground (that is, "above" or "in front of" all the other windows). Some
window manager A window manager is system software that controls the placement and appearance of windows within a windowing system in a graphical user interface. Most window managers are designed to help provide a desktop environment. They work in conjunctio ...
s allow interaction with windows while they are not in the foreground, while others will bring a window to the front whenever it receives input from the user. It is also possible for special windows to be designated "always on top"; these are then fixed to the top of the Z-order so that (with few exceptions) no other window can overlap them. When dealing with visual objects on a computer screen, an object with a Z-order of 1 would be visually "underneath" an object with a Z-order of 2 or greater. This is the same as making "layers" of objects where the Z-order determines what object is on top of another. An HTML page can use CSS to specify the Z-order so that some objects can be layered over others. Z-ordering is also used in 3D applications to determine object visibility based on overlap from other objects. This confers a speed advantage to the user as the computer does not need to render unseen objects.


z-index

The actual number assigned to a particular place in the Z-order is sometimes known as the z-index. In particular the CSS property that sets the stack order of specific elements is known as the z-index. An element with greater stack order is always in front of another element with lower stack order. p Negative stack orders can also be used in the same manner. A negative value will appear behind a positive one. z-index only works on elements that have a position value (e.g. position: relative;) and for many coders, this one of the first things to investigate when debugging why the z-index isn't working. Like all other CSS properties, it can be set with
JavaScript JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client side for webpage behavior, of ...
as well with the following syntax: object.style.zIndex= '1';


See also

*
Z-buffer A depth buffer, also known as a z-buffer, is a type of data buffer used in computer graphics to represent depth information of objects in Three-dimensional space, 3D space from a particular Perspective (graphical), perspective. Depth buffers are ...


References

{{DEFAULTSORT:Z-Order Computer graphics