Stacking Context

preface

As for this article about cascading context, this time as a learning record, most of the information from other articles, if there is any mistake, thank you for correcting. Mainly reviewing records, but examples and pictures are drawn and written by myself.

concept

By default, CSS is laid out as a stream, with no overlap between elements. The meaning of flow layout is understandable: on a rectangular surface of water, a number of rectangular floating blocks are placed. The floating blocks float on the surface of the water and are arranged in sequence with each other, without overlapping.

This is to draw them and it’s really easy to draw them one by one. However, there are situations where this streaming layout breaks down, such as when floats and positions are used. So you need to identify elements that are out of the normal document flow and remember their cascading information in order to render them correctly. Those elements that depart from the normal document flow form a cascading context, which can be thought of simply as thin layers (like Photoshop layers) of DOM elements that are stacked together to create the colorful pages we see.

The cascading context is a three-dimensional concept in HTML. In the specification of css2.1, each element is three-dimensional, tiled on the X, Y and Z axes of the canvas. Generally, elements are tiled on the page along the X and Y axes, and the user is not aware of their overlapping relationship on the Z axis. Once a meta-element is layered, it may be overwritten or overwritten by other elements. If an element has a cascading context, it is a cascading context element. We can understand that this element is closer to the user on the Z-axis than a normal element.

The rules

  • A cascading context is layered at a higher level than a normal element
  • The layer context can be nested, and the layer level of the inner layer context and its child elements is restricted by the outer layer context.
  • The cascading context and its sibling elements are independent of each other, squeezed into different cascading contexts, and the cascading order of elements is not comparable.
  • When elements of different context are stacked, the level of the element is determined by the sequence of the parent element’s context.

The formation of

There are ways to form a cascading context

  1. The root element
  2. Position is absolute, relative, and z-index is not auto
  1. Position: Fixed, sticky
  2. A Flex element whose z-index is not auto; I.e., the parent element to display: flex | | the inline – flex
  1. A child element of the grid container, and z-index is not auto
  2. An element whose opacity property is less than 1
  1. Elements whose mix-blending-mode attribute value is not normal
  2. Perspective/transform/filter, perspective, clip – path, mask, mask – image, mask – border, motion – path element values are not to none
  1. The Isolation property is set to the element of the ISOLATE
  2. Will-change specifies any CSS attribute, even if you don’t specify the value of the attribute directly. The non-initial value of this attribute creates the element of the cascading context
  1. -webkit-overflow-scrolling for the elements in touch
  2. Contain elements that contain layout, paint, or any of them (e.g. contain: strict, contain: Content).

level

In the same cascade context, you define the z-axis order of the elements of the cascade context above and below. The hierarchy comparison is only meaningful within the same hierarchy context element, where the hierarchy description defines the order of the elements in that context up and down on the Z-axis.

The order

Refers to the rules that elements follow, in the same cascading context, where elements follow the following rules:

Background and borders: The background and borders that form the cascading context.

Negative Z-index value: the position child element with -index value in the cascading context, the greater the negative, the lower the cascading level;

Block-level box: block-level, non-positioned child elements in a document flow;

Float box: unpositioned float element;

Inline box: inline, non-positioned child element in a document flow;

Z-index :0: positioning elements whose Z-index is 0 or auto, which form a new cascading context;

+z-index: Z-index is a positive positioning element. The larger the positive element is, the higher the hierarchy is.

For elements at the same level, their stacking order is determined by the order in which the elements appear in the document.

The detailed rules are described in the official W3 documentation, you can refer to: www.w3.org/TR/css-posi…

Comparison rules:

  1. Elements of different cascading contexts are compared to the hierarchy of their respective cascading contexts, and are arranged as a whole.

  2. In the same cascading context, in the cascading order, the higher the level of the elements, the higher the z axis.

  3. When the cascade level and cascade order are the same, the elements that are later in the DOM flow overwrite the previous ones.

  4. The element cascade order can only be compared in its own cascade context, if any other context, the parent element.

  5. If an element has multiple levels of elements, select its highest level for comparison.

  • Why do location elements stack on top of normal elements

The root reason for this is that once an element becomes a positioned element, its Z-index automatically takes effect, which is the default auto, or level 0, overwriting inline or block or float elements, depending on the cascading order table above.

The natural Z-index :auto level means that the cascading context elements and the positioning elements are in the same cascading order, so that when they cascade, the last element in the DOM stream overwrites the previous one.

For example

1. Common situation

<div class="box1" style="width: 100px; height: 100px; background-color: brown;" > <div class="red">box1-1</div> <div class="green">box1-2</div> </div> <div class="box2" style="width: 100px; height: 100px; background-color:#f0f"> <div class="blue">box2-1</div> <div class="blue">box2-2</div> </div>Copy the code

In this case, the only cascading context is HTML, with box1 and box2 in the order they appear.

2. Same level

<div class="box1" style="width: 400px; height:100px; position: fixed; z-index:1; background-color: brown;" > </div> <div class="box2" style="width: 50px; height:100px; position: fixed; z-index:1; background-color: rgb(190, 170, 170);" > </div>Copy the code

Box1 and Box2 both form a new cascading context, and their hierarchy is the same, and both are in the HTML cascading context, so the cascading relationship is determined by the order in which their code appears, the higher the hierarchy, at the top.

2. Parent-child elements

<div class="box1" style="width: 200px; position: absolute; z-index:-1; height: 300px; background-color: brown;" > <div style="width: 500px; height:200px; position: absolute; z-index:-10; background-color: rgb(141, 121, 121);" >box1-1</div> </div>Copy the code

Box1 forms a cascading context at the next-to-last level, but box1’s background is at the next-to-last level, and the child element’s cascading context z-inex is negative at the second-to-last level, with the child context cascading above the parent context. They are parent-child hierarchies, not sibling hierarchies, so their hierarchies cannot be compared by Z-index.

If you want the child element to be below the parent element, make the parent element have no cascading context and make the child element z-index negative.

<div class="box1" style="width: 200px; height: 300px; background-color: brown;" > <div style="width: 500px; height:200px; position: absolute; z-index:-10; background-color: rgb(141, 121, 121);" >box1-1</div> </div>Copy the code

2. What happens within the parent element of the same cascading context

<div class="box1" style="width: 200px; position: absolute; z-index:-1; height: 300px; background-color: brown;" > <div class="box1-1" style="width: 500px; height:200px; position: absolute; z-index:9; background-color: rgb(141, 121, 121);" >box1-1</div> </div> <div class="box2" style="width: 100px; position: absolute; height: 100px; background-color:#f0f"> <div class="box2-1" style="position: absolute; z-index:9; background-color: rgb(73, 32, 138); width:500px;" >box2-2</div> </div>Copy the code

In this example, box1 and box2 form two cascading contexts, box1:z-index is negative and box2:z-index is positive.

So box2>box1; In box1 children, the background of box1’s cascading context is always one level negative, and the z-index of <box1-1 is the level negative;

Similarly, the background of box1’s cascading context in Box2 is always negative one level <box2-2’s z-index=9

So box1<box1-1<box2<box2-2

z-index

Z-index applies only to positioned elements, not to non-positioned elements. It can be set to positive integer, negative integer, 0, auto. If a positioned element has no z-index set, the default is auto. The z-index value of the element is meaningful only in the same cascading context.

If the parent context’s level is lower than another context’s, it does not matter how high its Z-index is set. So if you run into z-index being set too high and it doesn’t work, check to see if its parent cascade context is overwritten by another cascade context.

Reference:

www.infoq.cn/article/2ka…

Segmentfault.com/a/119000001…

Application: html2canvas