1. The z – index concept

Z – the index definition

In the box model of three-dimensional coordinate system, z-index is used to represent the relationship between elements on the z-axis superposition sequence, and the element with a larger Z-index value will be superimposed on the element with a smaller Z-index value.

In CSS 2.1, all box model elements are placed in a three-dimensional coordinate system, the Z-axis is the user’s perspective, and the Z-index changes this order. The higher the z-index value, the farther forward it is, similar to the concept of layers in Photoshop.

This property sets the position of a positioning element along the Z-axis, defined as the axis that extends vertically into the display area. If it is positive, it is closer to the user; if it is negative, it is farther away from the user.

Z – the index values

  • Auto Auto (default)
  • Integer A positive, negative, or 0 (an integer)
  • Initial Uses the default mode (IE does not support it).

Simply considering the cascade order, z-index: auto and z-index: 0 are at the same level, but the two attribute values themselves are fundamentally different.

The sample

If the z-index values of the two layers are the same, the order of occurrence in the middle layer of the web code is 1. If the z-index values are equal, the red DIV < yellow DIV. 2. Z-index is not assigned, that is, auto

Z-index specifies the z-index value

  • Maximum: 2147483647 (231-1)
  • Minimum: -2147483647 (231-1)

The maximum value of int for 32-bit operating systems, which is treated as the maximum value if exceeded (slightly different from browser to browser).

Recommended value specification: Z-index :100, 200, 300…. Easy intermediate expansion

use

Now that you are familiar with z-index, can you use it freely to change the hierarchy?

In the above example: Q1. Why is DIV2 above DIV1? Q2. Why z-index does not take effect, and how to make it take effect?

Z-index features

  • In the CSS2.1 specification, only valid on the position element (non-static)
  • The z-index value changes the relative z-axis offset of an element in its parent stacking context

Relative offset refers to the order in which the parent SC is relative to the other sibling elements

2. Stacking Context

A cascading context is a three-dimensional representation of HTML elements laid out along an imaginary Z-axis relative to the user, assuming the user is facing a window or web page. — MDN

How do I generate a Stacking Context

  1. The Root element in HTML, called Root stacking Context
  2. Normal element sets position (non-static) & Z-index (non-auto)
  3. New properties in CSS3

Note:

  • Position Static position: The default value is static. There is no special position. It follows the normal document flow object
  • Z-index :(auto) : does not generate the cascading context (z-index:0 can)

Details are as follows:

  1. An element whose position value is fixed or sticky
  2. Grid (grid) container child, and z-index is not auto
  3. An element with a value less than 1 on opacity
  4. Elements whose mix-blending-mode attribute value is not normal
  5. Transform, filter, Perspective, Clip-path, mask elements whose attributes are not None
  6. Isolation elements with an attribute value of ISOLATE
  7. -webkit-overflow-scrolling for elements in touch
  8. The will-change value sets any property that, at non-initial, creates elements of the cascading context
  9. Contain elements that contain layout, paint, or any of them (e.g. contain: strict, contain: Content)

The above are just examples of common and possible uses.

How does Stacking Context affect z-Index?

  1. The elements that generate SC have a higher Stacking Level than ordinary elements
  2. The comparison of z-index values is valid only in the current Parent SC
  3. The Z-index of the current SC is affected by the Parent SC

Cascade level:

  • In the same cascading context, the SC element in the SC is described on the z-axis
  • Among the other ordinary elements, it describes the definition of these ordinary elements on the Z axis

Note: The hierarchy of HTML is different from that of a cascading context

The sample analysis

  • The child element z-index:1 in SC2
  • SC3 neutron element Z-index :10000
  • SC2>SC3 child elements cannot be exceeded

3. Stacking Order

When elements are stacked, they are displayed vertically on the Z axis in a specific order.

Cascading phenomenon

block word > background inline-block word < inline-block backgroundIn the absence of a background, the background is transparent and the text in the red box is higher than the background in the green box.

4. Development skills

  1. The first step is to see if the two elements you want to compare are in the same SC
  • If so, who is on top of the hierarchy
  • If two elements are not in the same SC, compare their parent SC first
  1. When two elements are stacked at the same level and in the same order, the next element in the DOM is stacked at a higher level than the previous one

Other related

  • CSS3, no position, z-index value may take effect (display:flex)
  • Browser Compatibility Differences
  • Avoid fixed positioning under the transform element

In Internet Explorer 6, the < SELECT > element is a window control, so it always appears at the top of the stack order regardless of the stack’s natural order, positional value, or Z-index. In Firefox version 2, a negative Z-index value places the element after the stack context, rather than in front of the background and border of the element where the stack context is set up.

For elements declaring transfrom values other than None, position: fixed will be positioned against the nearest ancestor of the declared transform if its child element contains position: fixed. This is because elements declaring transfrom values other than None define a local coordinate system that causes postion: Fixed calculates the layout with this coordinate system. This bug is still unresolved and it is recommended to avoid fixed positioning under the transform element.

5. Small practice

<main class="wrap"> <div class="pink"> Parent: pink <span class="pink-child"> child: pink <span class="pink-grandchild"> Grandson: pink Grandchild</span> </span> </div> <div class="yellow"> Yellow Child</span> </div> <div class="green">Copy the code

  • The relationship between father and son cannot be changed: the son is above, the father is below
  1. Layer level > Element with no context parent: PINK > parent: yellow
  2. Yellow Child > Pink Cascade context 2 > cascade context 1

  • Element > normal element that generates the cascading context

quiz

<div class="left">
  <div class="left-child"></div>
</div>
<div class="mid">
  	<div class="mid-child1"</div>
  	<div class="mid-child2"></div>
</div>
<div class="right">
  <div class="right-child"></div>
</div>
Copy the code

Think 🤔 cascade num values – answer at the end of this article

Auxiliary tool

Chrome Extension tools:

  • z-index

Can display page z-index value order, click to locate elements.

  • z-context

  • layers

Here’s the browser’s own Layer tool:View the layer structure of the page after opening as shown above:

Refer to the article

  • Thoroughly understand CSS cascading context, cascading hierarchy, cascading order, and Z-index
  • In-depth understanding of cascading context and cascading order in CSS
  • Cascading context
  • The W3c document
  • z-index

Reveal the answer: