图解一下啥是CSS堆叠上下文，啥是CSS堆叠层叠顺序，让你对css的疑惑少一点?

CSS 堆叠上下文是啥？

咱们有一个基本样式的 div，样式以下：

div{
    width: 200px;
    height: 200px;
    border:10px solid red;
    padding:15px;
    margin:12px;
}

效果以下：

这边有个问题是： border 和 background是什么关系 ？

这边有两个选项：

1. 平行的
2. border 更靠近用户
3. background 更靠近用户

大家会选择哪一个呢？

其实弄懂这个很简单的，咱们只须要把 border 设置成半透明就知道答案啦

border:10px solid rgba(255, 0, 0, 0, .3);

从运行结果就能够看出，红色透着绿色，因此是 border 更靠近用户 。 这时候你就知道div 不是平的，在垂直屏幕上也是有层次关系的，那这个层次关系就叫作堆叠上下文。

接着咱们在 div 里面写个 ‘你好，世界’，效果以下：

这里又引起了一个问题，这个 ‘你好，世界’， 是在哪层了，是在 border 上仍是在 border 与 background 之间呢？

这边咱们只须要把'你好'移动到border上就可知道缘由了，那怎么把文字移动过去呢？这边咱们用 text-indent ,样式以下：

div{
  width: 200px;
  height: 200px;
  border:10px solid rgb(255, 0, 0);
  padding:15px;
  margin:12px;
  background-color: green;
  text-indent: -20px;
}

效果以下：

从运行效果就能够看了，文字是在 border上面的，因此文字区域（内联元素）是更靠近用户的

那若是div 里面还有一个 div 呢？代码结构以下：

// html
  <div class="parent">
    你好，CSS世界
    <div class="child"></div>
  </div>

// css
   .parent{
      width: 200px;
      height: 200px;
      border:10px solid rgb(255, 0, 0);
      padding:15px;
      margin:12px;
      background-color: green;
      text-indent: -20px;
    }
    .child{
      height: 20px;
      background:purple;
    }

效果以下：

又引起了一个问题，紫色区域是比文字区域高仍是相反呢？

那怎么验证这个问题了？咱们只要把里面的 div 往上移动就行，注意这里不能用 position由于为改变层级结构， 咱们只要用 margin-top 就好了，如：

margin-top:-20px;

效果以下：

你会发现文字区域是在上面的。这边就得出一个结论：

若是div里面有块级元素，块级元素是盖不住内联元素的，换句话说内联元素离用户更近

那若是里面div有文字呢？ 这时咱们须要 写几个字，效果以下：

你会发现 子元素的文字区域会盖住父元素的文字区域，因此这边又有一个小的结论：文字区域后出现的会覆盖前出现的。

浮动元素

来一个基本结构：

// html
  <div class="parent">
      你好
    <div class="float">

    </div>
  </div>
  // css
.parent{
  width: 200px;
  height: 200px;
  border:10px solid rgb(255, 0, 0);
  padding:15px;
  margin:12px;
  background-color: green;
  color: aliceblue;
}
.float{
  height: 40px;
  width: 40px;
  background:purple;
  float: left;
}

效果以下：

上面代码就不解释了，大家确定都 知道 ？按上面的套路，这里一样仍是那个问题：你好在上面呢仍是这个 float 元素呢？

要验证这个问题，一样使用 text-indent 那文字向左动点，这里我直接 上效果了：

从效果图，咱们能够得出 文字区域是在 浮云元素上面的。

那浮动元素是在 文字区域与内部块级元素之间呢，仍是内部块级与border元素之间呢？换句话说就是 浮动元素与块级元素哪一个离用户更近？

咱们直接在父级元素写一个 child:

// hmtl
  <div class="parent">
      你好
    <div class="float"></div>
    <div class="child"></div>
  </div>

  // css
  
 .child{
  height: 20px;
  background: black;
}

效果以下：

从上能够看出浮云元素盖住了 child元素，说明浮动元素的层级是比块级元素高的。即浮动元素是在文字区域与块级元素之间的。

那浮动元素里面的文字与外面的文字是怎么样的呢？这边我直接在浮动里面加了 float文字，效果以下：

你会发现 浮动里面的文字是盖不住浮动外面文字的。

绝对定位元素

在上面的基础上咱们增长一个 relative 元素，以下：

// htmk
  <div class="parent">
      你好
    <div class="float">floatt</div>
    <div class="child"></div>
    <div class="relative"></div>
  </div>
  
 // css
.relative{
  width: 100px;
  height: 100px;
  background: pink;
  margin-top: -15px;
}

效果以下：

这时咱们给类relative 加上一个：

position:relative;

效果以下：

你会发现 relative 元素盖住了浮动元素，这说明 给元素加一个 relative 定位会增长对应的一个层级。检查 relative 元素，会看到：

加了 position:relative定位会多了一个 z-index:auto 的东西，实际上你定位，都是按z-index来计算的。

这里咱们给没有定位的 child元素加上一个z-index:

<div class="parent">
      你好
    <div class="float">floatt</div>
    <div class="child" style="z-index:99999"></div>
    <div class="relative"></div>
  </div>

效果以下：

你会发现 child 元素并无盖住 relative 元素！

这边直接 给告终论了：z-index 只有在 position:relative|absolute
才有效果，若是都是relative，z-index同样，那么后面会盖前面，z-index值大的会盖住小的。

咱们接着在原有上加一个relative2，样式以下：

.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中的层叠上下文和层叠顺序
MDN 文档

你的点赞是我持续分享好东西的动力，欢迎点赞！

一个笨笨的码农，个人世界只能终身学习！

更多内容请关注公众号《大迁世界》！