web积累

z-index/层叠上下文：

1.简单理解就是z轴上的位置

2.深入理解层叠顺序（实际上，大部分元素的层级都低于z-index=0）

3.记住一个重要的结论：定位元素创建新的层叠上下文z-index=50，高于另外一个层叠上下文z-index=10的所有层叠等级

• .one —— z-index = 10

• .two —— z-index = 10.100

• .three —— z-index = 10.150

• .four —— z-index = 50

• 

HTML:

<div class="one">
  <div class="two"></div>
  <div class="three"></div>
</div>
<div class="four"></div>

CSS:

div {
  width: 200px;
  height: 200px;
  padding: 20px;
}
 
.one, .two, .three, .four {
  position: absolute;
}
  
.one {
  background: #f00;
  outline: 5px solid #000;
  top: 100px;
  left: 200px;
  z-index: 10;
}
  
.two {
  background: #0f0;
  outline: 5px solid #000;
  top: 50px;
  left: 75px;
  z-index: 100;
}
 
.three {
  background: #0ff;
  outline: 5px solid #000;
  top: 125px;
  left: 25px;
  z-index: 150;
}
 
.four {
  background: #00f;
  outline: 5px solid #ff0;
  top: 200px;
  left: 350px;
  z-index: 50;
}

尽管 div.two 有更高的 z-index（100），但在页面上，它的层级实际上比 div.four（z-index 为50）要低。下图就是页面元素的层级情况，根据黑色和黄色边框，我们可以区分每个元素生成的不同的层叠上下文。