Why is z-index lower than z-index?

preface

CSS provides three different positioning schemes for the layout of the box model

• Normal document flow
• floating
• positioning

The last option (specifically absolute positioning) would remove the element completely from the normal document flow, leaving its final destination up to the developer.

You can position an element in two dimensions by setting the values of top, left, bottom, and right, but CSS also allows you to place it in three dimensions using z-index.

On the surface, z-index seems like a very simple property, where you set the value, the element will be located on the Y-axis, and that’s it. But it’s not as simple as you might think. Behind this attribute is a set of rules that determine the level of the element.

Basic concepts of Z-index

The X axis represents the horizontal direction, the Y axis represents the vertical direction, and the Z axis represents the layout of the elements when we look at the page (screen).

The screen is a two-dimensional plane, so we can’t actually see the Z axis, which is actually shown through perspective. That is, when multiple elements share the same two-dimensional civilian, the friendly element is at the top, and some elements are at the bottom, thus perceiving the presence of the Z-axis.

CSS allows us to assign three values to the Z-index to determine the position of an element along the Z-axis.

• Auto (default) Stack order equal to parent elements
• The stack order of the number elements can be positive integers, negative integers, or 0
• Inherit specifies that the z-index property value should be inherited from the parent element

If two elements share the same two-dimensional space after positioning, then in this space, the element with a larger Z-index will cover the element with a smaller Z-index.

Cascade context and cascade level

What is a cascading context?

MDN definition: We assume that the user is facing a window or web page, and that the cascading context is a three-dimensional representation of HTML elements laid out along an imaginary Z-axis relative to the user. All HTML elements occupy this space in order of priority based on their element attributes.

What are cascading levels?

In a cascading context, the z-index value of the child cascading context is meaningful only in the parent. The child cascade context is automatically treated as a separate unit of the parent cascade context. This results in a cascade level, which determines the order in which elements are stacked on the page.

In a cascading context, a total of seven cascading levels can occur, from lowest to highest, in order:

Conclusion:

• A cascading context can be contained within other cascading contexts and together create a hierarchy of cascading contexts.
• Each cascade context is completely independent of its siblings: only child elements are considered when dealing with cascades.
• Each cascade context is self-contained: when the contents of an element are cascaded, the element as a whole is cascaded sequentially in the parent cascade context.

Note: The hierarchy of the cascading context is a child of the HTML element hierarchy, because only certain elements create the cascading context. It can be said that elements that do not create their own cascade context are assimilated by the parent cascade context.

The sample

Each element being located creates its own cascading context because they are assigned location attributes and Z-index values. We list the hierarchy of the cascading context as follows:

• Root

  • DIV #1

  • DIV #2

  • DIV #3

    • DIV #4
    • DIV #5
    • DIV #6

Note that DIV #4, DIV #5, and DIV #6 are children of DIV #3, so their cascading is handled entirely in DIV #3. Once the layering and rendering process in DIV #3 is complete, the DIV #3 element is passed as a whole and layered on the root element with the sibling element’s DIV.

Div #1 > div #4 > div #6 > div #5 > div #3 > div #2 > Root.

The case shows

Finally, let’s look at an example to explain why the element with the highest z-index is below the element with the lowest z-index.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        div {
            padding: 20px;
        }
        .one..two..three..four {
            position: absolute;
            font-size: 50px;
        }
        .one {
            width: 400px;
            height: 400px;
            background: red;
            top: 100px;
            left: 200px;
            z-index: 10;
        }
        .two {
            background: aqua;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 50px;
            z-index: 100;
        }
        .three {
            background: blue;
            width: 200px;
            height: 200px;
            top: 100px;
            left: 100px;
            z-index: 150;
        }
        .four {
            background: green;
            width: 200px;
            height: 200px;
            top: 250px;
            left: 350px;
            z-index: 50;
        }
    </style>
</head>
<body>
    <div class="one">
        1
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    <div class="four">4</div>
</body>
</html>
Copy the code

Take a look at the renderings

Since div. Two and div. Three are in div. One, its z-index is related to the cascading context of div. One. The actual z-index would look like this:

Conclusion: Div.one and everything contained within it will be hierarchically lower than div.four, and no matter how much z-index you set to a child element of div.one, the child element cannot be hierarchically higher than div.four.

Finally: after reading the above example, you will understand that a large Z-index value cannot be displayed on top of a small z-index value.

Summary: Location elements can create new cascading contexts in which all levels are higher or lower than all levels in another cascading context.