Is Z-index Absolute or Relative in HTML?

Z-Index: Absolute or Relative?

In web development, the z-index property governs the stacking order of HTML elements. However, a common question arises: is an element's z-index absolute or relative?

Absolute vs. Relative Z-Index

The z-index property defines an element's position in the third dimension, relative to its siblings. It does not determine the element's position within the three-dimensional layout of the entire page. Hence, z-index is relative to the element's parent.

In the example provided:

<code class="html"><div style="z-index:-100">
    <div id="dHello" style="z-index:200">Hello World</div>
</div>

<div id="dDomination" style="z-index:100">I Dominate!</div></code>

#dHello nest under its parent div. Despite having a higher z-index (200), it will appear behind #dDomination because the latter has a sibling z-index of 100. This is because the z-index is relative to the parent div.

Standards and Browser Variations

The W3C defines the z-index property as relative to the parent element. However, different browsers may have varying implementations:

1. In most browsers, z-index is relative to the parent's computed z-index, which is typically 0.
2. In Internet Explorer 6 and older, z-index was relative to the document root.
3. In ,** Safari and Chrome, elements with the same z-index are ordered based on their position in the page source.

Visualization Example

Consider the following code:

<code class="html"><div id="X" style="z-index:1">
  <div id="Y" style="z-index:3"></div>
</div>
<div id="Z" style="z-index:2"></div></code>

Initially, you might assume #Y overlaps #Z due to its higher z-index. However, since #Y is a child of #X (which has a z-index of 1), #Z will appear in front of both #X and #Y.

The above is the detailed content of Is Z-index Absolute or Relative in HTML?. For more information, please follow other related articles on the PHP Chinese website!