CSS堆叠上下文是什么？有什么作用？

.relative2{
  width: 100px; 
  height: 150px;
  background: gold;
  margin-top: -15px;
  position: relative;
}

效果如下：

此时给 relative2 加上一个 z-index:-1,在看

又得出一个结论：z-index为负值时，是位于 background下面的

这时，我们给.parent元素添加以下两个样式：

  position: relative;
  z-index: 0;
这时的效果如下：
这时奇怪的事情就出现了，z-index: -1 的跑到上面来了。
MDN上有对什么堆叠给出了一些内容，如下 ：
其实我们给.parent元素设置z-index：0 ，根据MDN说的，我们其实已经 创造一个层叠上下文 。
那什么是堆叠上下文？下面是张鑫旭一段原文：
其实这跟美国一个大法官说的一句话很像：我不知道什么色情，但当我看到它是我就知道什么是色情。 
CSS堆叠上下文也是类似的道理，你很难说出什么是CSS堆叠上下文，但只要它满足MDN列出的几种情况，它就是CSS堆叠上下文。
CSS堆叠层叠顺序
CSS堆叠上下文是有一个垂直屏幕上有一个上关系的，它们的关系如下：
所以这就解释为什么z-index为负值的时候，它会在 background上面，因为我们 z-index:0 时就创建一个CSS堆叠上下文。
CSS堆叠上下文作用
下面给一个基本的内容：
   // html
  <div class="parent">
    <div class="a relative">a
      <div class="a1">a1</div>
    </div>
    <div class="b relative">b
      <div class="b1">b1</div>
    </div>
  </div>
  // css
 .parent{
  width: 200px;
  height: 200px;
  border:10px solid rgb(255, 0, 0);
  padding:15px;
  margin:12px;
  background-color: green;
}
.relative{
  width:100px;
  height:100px;
  background: orange;
  position: relative;
  border:1px solid red;
}
.a1{
  position: relative;
  background:green;
}
.b1{
  position: relative;
  background:red;
}
效果如下：
接着我们在b1在添加以下样式：
   margin-top: -90px;
b1会盖住a1，这个我们应该知道是什么原因了吧？因为a1 b1都是块级元素，后面会盖住前面的，没毛病！
那么 a1 和  b1 的CSS堆叠上下文是谁？
我们可以MDN给出的第一句：
根元素，所以a1 和 b1的CSS堆叠上下文就是Html
接着给a1以下样式：
   z-index: 2;
接着给b1以下样式：
z-index: 0;
效果如下：
a1跑到b1上面了，这个很好理解，因为 a1 的z-index:2 比 b1的z-index:0 在，所以a1在上面。
现在有一个问题，a1是永远盖住b1吗？
这边你可能会说，a1 的z-index:2比 b1的 z-index:0 永远都大，当然会盖住b1呀！是这样吗？我们试着改变一下CSS堆叠上下文。
我们分别给a 和 b各做一个CSS堆叠上下文： 如下：
.a{
  position: relative;
  z-index: 1;
}
.b{
  position: relative;
  z-index: 1;
}
效果如下：
先分析a 和 b它们是谁覆盖谁，因为 两个定位和z-index都一样所以 b 会覆盖 a。还有一个现象有没有发现， b1 盖住了 a1? 明明 a1 的 z-index 大于 b1,这是为什么？为什么小的会盖住大的？为什么？
因为 b 比 a 高一点，所以 b 里面的内容都会比 a 高一点。这就是 CSS堆叠上下文一个特性。
比如说阿里巴巴有一个奇怪的部门叫做政委，是由马云等一些创始人组成的。在这个部门里面，你是不是都比其它部门要高级点。
所以 b1 虽然在 b 里面等级为0，在 b 是高级的一个部门，就是可以压过你 a 这个部门里面的 2 级的人。
以上就是CSS堆叠上下文是什么？有什么作用？的详细内容，更多请关注php中文网其它相关文章！
				
				

					
微信
					
分享
				

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



  
关键词：CSS堆叠上下文是啥？有啥作用？