CSS3-- about the z-index does not take effect problem

References: https://blog.csdn.net/u012207345/article/details/82744505

https://www.cnblogs.com/mrszhou/p/7745290.html

z-index attribute is used to adjust the order of the elements and sub-elements in the z-axis, occurs when the cover element, which element in the above, which element below. Generally speaking, the larger the value of z-index element overrides the lower element.

z-index of the default value is Auto , can be provided a positive integer, it may be set to a negative integer.

Only the positioning elements (i.e., positionthe attribute value is not statican element) ofz-index才会起作用。

Z-index case is not in effect:

1. When using z-index of the element is not positioned (non-static)

2. In the case of positioning, the z-index element is not effective, because child elements come from behind, the covering element solution: The z-index is provided to cover the sub-element of the element negative, and the element does not z-index attribute.

<div class="dashed-box">Dashed box
  <span class="gold-box">Gold box</span>
  <span class="green-box">Green box</span>
</div>

.dashed-box { 
  position: relative;
  background: red;
  border: dashed;
  z-index: 1;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box { 
position: absolute;
  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box { 
  position: absolute;
  z-index: 2; /* put .green-box above .dashed-box */
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}

Box-.dashed {   / * remove the z-index of the parent element, or z-index: Auto * / 
  position : relative ; 
  background : Red ; 
  border : Dashed ;    
  height : 8em ; 
  margin-bottom : 1em ; 
  margin-Top : 2em ; 
} 
.gold-Box {  
position : Absolute ; 
  Z-index : . 3 ; / * for comparison, remains unchanged * / 
  background : Gold ;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box { 
  position: absolute;
  z-index: -2; /* 改成负数 */
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}

 Extended knowledge CSS 7 class levels stack

When the two elements of the same level, when stacked, this time we should follow the following two criteria:

1. Principles come from behind
2. 谁 z-index 大，谁在上的准则