Detailed explanation of important cascading concepts in CSS

Detailed explanation of important cascading concepts in CSS

Recently, I encountered a problem in the process of the project. I want the menu-bar to always be displayed on the top, and the subsequent elements are displayed under it. At that time, setting the z-index did not work. I don’t know why, so I found some information about CSS stacking and solved this problem. Here is a record~

The screen is a two-dimensional plane, but HTML elements are arranged in a three-dimensional coordinate system, where x is the horizontal position, y is the vertical position, and z is the position from the inside to the outside of the screen. When we look at the screen, we look from the outside to the inside along the z-axis. Therefore, the elements form a stacking relationship from the user's perspective. An element may cover other elements or be covered by other elements.

So here are a few important concepts: stacking context (Stacking Context), stacking level (Stacking Level), stacking order (Stacking Order), z-index

statement:

  • The following positioning elements refer to position:absolute|fixed|relative|sticky
  • The following non-positioned elements refer to position:initial|static
  • There is a similar concept about stacking context: Block Formatting Context (BFC). You can refer to the important BFC in CSS, which also introduces some content of document flow.
  • This article is quite long, but if you have the courage to read it, you should have a basic understanding of the concepts related to stacking (～o￣▽￣)～

1. Stacking Context

Stacking Context is a three-dimensional concept in HTML. In the CSS2.1 specification, the position of each element is three-dimensional. When elements are stacked, they may cover other elements or be covered by other elements. The higher the position on the z-axis, the closer it is to the screen observer.

The article <Things You Didn’t Know About Z-index> has a good analogy, which I’ll quote here;

Imagine a table with a bunch of items on it. This table represents a stacking context. If there is a second table next to the first table, that second table represents another stacking context.

Now imagine that there are four small cubes on the first table, and they are all placed directly on the table. On top of these four small squares is a piece of glass, and on top of the glass is a plate of fruit. These blocks, glass pieces, and fruit plates each represent a different stacking level in the stacking context, which is the table.

Every web page has a default stacking context. The root of this stacking context (the table) is <html></html> . Everything inside the html tag is placed on one stacking level in this default stacking context (the items are placed on the table).

When you assign a z-index value other than auto to a positioned element, you create a new stacking context with its own stacking layers that are independent of other stacking contexts and stacking layers on the page. It’s like you’re bringing another table into the room.

Stacking Context 1 is formed by the document root element. Stacking Context 2 and 3 are stacking levels on Stacking Context 1. They also each form a new stacking context, which contains new stacking levels.

Within a stacking context, its child elements are stacked according to the rules explained above. The methods for forming a stacking context are:

  • Root element <html></html>
  • position value is absolute|relative , and z-index value is not auto
  • position value is fixed|sticky
  • flex element whose z-index value is not auto , that is, the parent element display:flex|inline-flex
  • Elements with an opacity value less than 1
  • Elements whose transform attribute value is not none
  • Elements whose mix-blend-mode attribute value is not normal
  • Elements whose values ​​of filter , perspective , clip-path , mask , mask-image , mask-border , and motion-path are not none
  • Elements with perspective value other than none
  • Elements whose isolation attribute is set to isolate
  • will-change specifies any CSS properties, even if you don't directly specify values ​​for those properties
  • -webkit-overflow-scrolling property is set to touch element

Summarize:

Stacking contexts can be contained within other stacking contexts, and together they form a hierarchy of stacking contexts.

Each stacking context is completely independent of its sibling elements. Only child elements are considered when handling stacking. This is similar to BFC.

Each stacking context is self-contained: when the contents of an element are stacked, the entire element will be stacked in order within the parent stacking context.

2. Stacking Level

The stacking level determines the concept of the display order of elements on the z-axis in the same stacking context;

  • The stacking level of a normal element is determined by its stacking context.
  • Comparison of stacking levels is only meaningful within the same stacking context.
  • In the same stacking context, the stacking level description defines the up-down order of elements in the stacking context on the Z axis.

Note that the stacking level is not necessarily determined by z-index. Only the stacking level of positioned elements is determined by z-index. The stacking level of other types of elements is determined by the stacking order, the order in which they appear in the HTML, and the stacking level of the elements above their parent. For detailed rules, see the introduction to the stacking order below.

3. z-index

In CSS 2.1, all box model elements are located in a three-dimensional coordinate system. In addition to the commonly used horizontal and vertical axes, box model elements can also be stacked along the "z-axis". When they overlap each other, the z-axis order becomes very important.

-- CSS 2.1 Section 9.9.1 - Layered presentation

z-index only applies to positioned elements and is invalid for non-positioned elements. It can be set to a positive integer, a negative integer, 0, or auto. If a positioned element does not have a z-index set, the default is auto.

The z-index value of an element is only meaningful within the same stacking context. If the stacking level of a parent stacking context is lower than that of another stacking context, then setting its z-index higher will have no effect. So if you encounter a situation where a large z-index value doesn’t work, check if its parent stacking context is covered by other stacking contexts.

4. Stacking Order

The stacking order (stack order, stacking order, stacking order) describes the order of elements in the same stacking context. Starting from the bottom of the stack, there are seven stacking orders:

  • Backgrounds and borders: The background and borders of the element that forms the stacking context.
  • Negative z-index value: Positioning child elements with negative z-index values ​​within the stacking context, the larger the negative value, the lower the stacking level;
  • Block-level box: a block-level, non-positioned child element in the document flow;
  • Floating box: non-positioned floating element;
  • Inline box: Inline, non-positioned child elements in the document flow;
  • z-index: 0: Positioned elements with a z-index of 0 or auto. These elements form a new stacking context.
  • Positive z-index value: A positioned element with a positive z-index. The larger the positive value, the higher the stacking level.

Elements in the same stacking order are stacked in the order they appear in the HTML; an element at level 7 will appear above the elements before it, appearing to cover the lower level elements:

5. Actual Combat

5.1 General situation

The three relative positioned div blocks each have span.red , span.green , span.blue of different absolute colors, all of which have position:absolute ;

See Codepen - Normal case

So when no element has a z-index property, the elements in this example are stacked in the following order (from bottom to top):

  • Background and border of the root element
  • Block-level non-positioned elements stack in the order they appear in the HTML.
  • Inline non-positioned elements stack in the order they appear in the HTML.
  • Positioned elements are stacked in the order they appear in HTML.

Red, green and blue are all positioned elements with z-index auto, so according to the 7-layer stacking order rule, they all belong to the 6th level of the stacking order, so they are stacked in the order of appearance in HTML:紅->綠->藍

5.2 In the same stacking context parent element

Red and green are under a div.first-box , and blue is under div.second-box . position:absolute is set for red, green and blue, and position:relative is set for first-box and second-box .

See Codepen - Different parent elements but both under the root element

In this example, the parent elements first-box and second-box of the red, blue and green elements do not generate a new stacking context. They are both elements in the root stacking context and are both at level 6 in the stacking order. Therefore, they are stacked in the order of appearance in HTML:紅->綠->藍

5.3 Add z-index to child elements

Red and green are under a div.first-box , blue and yellow are under div.second-box , and position:absolute is set for red, green and blue. If a z-index:1 is added to green, then .green is at the top;

If you add an absolutely positioned span.gold after .green under .second-box and set z-index:-1 , it will be below red, green and blue.

See Codepen - Setting z-index

In this example, no new stacking context is generated in the parent element of the red, blue, green and yellow elements. They all belong to the elements in the root stacking context.

Red and blue do not have a z-index set, and both belong to level 6 in the stacking order, stacking in the order of appearance in the HTML;

  1. Green has a positive z-index and is at level 7.
  2. Yellow has a negative z-index and belongs to level 2;

So the order from bottom to top in this example is:黃->紅->藍->綠

5.4 In parent elements with different stacking contexts

Red and green are under a div.first-box , and blue is under div.second-box . position:absolute is set for red, green and blue. If the z-index of first-box is set larger than that of second-box , then no matter how large the z-index of blue is z-index:999 ), blue is always under red and green. If we only change the z-index of red and green, since both elements are in the stacking context generated by the parent element first-box , the one with the larger z-index will be on top.

See Codepen - Parents of different stacking contexts

In this example, red, green, and blue are all positioned elements with z-index set, but their parent element creates a new stacking context;

  1. The red and green parent element first-box is a positioned element with a positive z-index, thus creating a stacking context that is level 7 in the stacking order;
  2. The blue parent element second-box also creates a stacking context and belongs to level 6 in the stacking order;
  3. According to the stacking order, all elements in first-box are placed on second-box ;
  4. Red and green both belong to the stacking context first-box and have different positive z-indexes set, and both belong to level 7 in the stacking order;
  5. The blue element belongs to the stacking context second-box and has a large positive z-index, making it level 7 in the stacking context.
  6. Although the z-index of blue is large, because the stacking level of second-box is smaller than that first-box , it is located below red and green;

So in this example the order from low to high is:藍->紅->綠

(The situation I encountered is similar to this example)

5.5 Setting opacity for child elements

Red and green are under div.first-box , blue is under div.second-box , position:absolute is set for red, green and blue, and z-index:1 is set for green, so green is on top of red and blue;

If you set opacity:.99 for first-box , no matter how high the z-index of red and green is z-index:999 ), blue will always be on top of red and green.

If you add a span.gold after .green under .second-box and set z-index:-1 , it will be below red, green and blue.

See Codepen - Effect of opacity

As mentioned before, setting opacity can also form a stacking context, so:

  1. opacity first-box is set, first-box becomes a new stacking context;
  2. second-box does not form a new stacking context, so the elements in it all belong to the root stacking context;
  3. Yellow belongs to level 2 in the stacking order, red and green belong to level 7, first-box belongs to level 6, and blue belongs to level 6 in the stacking order and is above first-box in HTML appearance order;

So in this example, the order from low to high is:黃->紅->綠->藍

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<:  Web designer's growth experience

>>:  A brief discussion on the correct posture of Tomcat memory configuration

Recommend

JavaScript to achieve Taobao product image switching effect

JavaScript clothing album switching effect (simil...

A detailed tutorial on using Docker to build a complete development environment

Introduction to DNMP DNMP (Docker + Nginx + MySQL...

Vue uses vue-quill-editor rich text editor and uploads pictures to the server

Table of contents 1. Preparation 2. Define the gl...

Ubuntu opens port 22

Scenario You need to use the xshell tool to conne...

Things You Don’t Know About the CSS ::before and ::after Pseudo-Elements

CSS has two pseudo-classes that are not commonly ...

The main idea of ​​​​dynamically setting routing permissions in Vue

I have seen some dynamic routing settings on the ...

How to split and merge multiple values ​​in a single field in MySQL

Multiple values ​​combined display Now we have th...

Example of using docker compose to build a consul cluster environment

Basic concepts of consul Server mode and client m...

Solve the problem of not finding NULL from set operation to mysql not like

An interesting discovery: There is a table with a...

How can MySQL effectively prevent database deletion and running away?

Table of contents Safe Mode Settings test 1. Upda...

A brief discussion on the differences between several ways of executing .sh files in Ubuntu

Preface Different script execution methods will r...

Vue+el-table realizes merging cells

This article example shares the specific code of ...

Three methods of inheritance in JavaScript

inherit 1. What is inheritance Inheritance: First...

Detailed explanation of MySQL cursor concepts and usage

This article uses examples to explain the concept...

Detailed explanation of the solution for migrating antd+react projects to vite

Antd+react+webpack is often the standard combinat...