What does z-index mean in css?

In CSS, z-index means "level, layer space stacking level", which can specify the stacking order of an element, which is used to confirm the stacking level of the element in the current stacking context, with higher stacking Sequential elements will always appear before elements lower in the stacking order; syntax "element {z-index: auto|}".

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css z-index

z-index ：auto|<integer>

• auto default value

Definition: The stacking order of an element in the document, used to confirm the stacking level of the element in the current stacking context.

Applies to: positioned elements. That is to say, elements whose position is non-static are defined

The stacking order of each element is determined by the stacking context to which it belongs and the stacking level of the element itself (each element only belongs to one stacking context).

1. The same cascading context

The larger cascading level is displayed above, and the smaller level is displayed below;

The two elements in the cascading level are displayed according to their HTML In the order of the document flow, what is written later will overwrite the previous one.

2. Different cascading contexts

The display order of elements is determined by the cascading level of their ancestors, regardless of their own cascading level.

Example:

1. There are two p boxes, a and c are in one box, and b is in another box. Consider that the z-index is Not a normal effect.

  
    <div>  
        <p>a</p>  
        <p>c</p>  
    </div>  
    <div>  
        <p>b</p>  
    </div>  

p z-index is not set, and a new local cascading context will not be generated under advanced browsers. That is to say, their child elements are not wrapped by the new local cascading context, so their child elements will In the same stacking context, the display order can be determined directly by its own stacking level.

div {  
      position: relative;  
      width: 100px;  
      height: 100px;  
   }  
p {  
      position: absolute;  
      font-size: 20px;  
      width: 100px;  
      height: 100px;  
   }  
.a {  
      background-color: pink;  
      z-index: 1;  
   }  
         
.c {  
      background-color: green;  
      z-index: 2;  
      top: 20px;  
      left: 20px;  
   }  
.b {  
      background-color: red;  
      z-index: 3;  
      top: -20px;  
      left: 40px;  
        }

a, b, and c are in a stacking context, so the level is determined based on the z-index size. As shown in the figure below:

2. There are two p boxes, a and c are in one box, and b is in another box. Consider that its z-index is Not a normal effect.

	<div>
		<p>a</p>
		<p>c</p>
	</div>
	<div>
		<p>b</p>
	</div>

p sets z-index, then the child elements in p are mainly based on the cascading relationship of the parent element.

<style>
		div {
			width: 100px;
			height: 100px;
			position: relative;
		}
		.box1 {
			z-index: 2;
		}
		.box2 {
			z-index: 1;
		}
		p {
			position: absolute;
			font-size: 20px;
			width: 100px;
			height: 100px;
		}
		.a {
			background-color: red;
		}
		.c {
			background-color: green;
			top: 20px;
			left: 20px;
		}
		.b {
			background-color: blue;
			top: -20px;
			left: 40px;
			z-index: 20;
		}
	</style>

a, b, and c are in different stacking contexts, so the level is determined based on the z-index size of the parent. As shown in the figure below:

From the above, we can see how z-index is determined: the stacking context to which it belongs and the stacking level of the element itself

Update For more programming-related knowledge, please visit: programming learning website! !

The above is the detailed content of What does z-index mean in css?. For more information, please follow other related articles on the PHP Chinese website!