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

CSS 堆叠上下文是啥？

我们有一个基本样式的div，样式如下：

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

效果如下：

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

这边我们只需要把&＃39;你好&＃39;移动到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
  

    你好，CSS世界
    

  

    // 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;
    }

效果如下：

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

浮动元素

来一个基本结构：

  // html
  

      你好
    


    
  
  // 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;
}

效果如下：

从效果图，我们可以得出 文字区域是在 浮云元素上面的。

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

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

    // hmtl
  

      你好
    

    

  

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

效果如下：

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

绝对定位元素

在上面的基础上我们增加一个 relative 元素，如下：

  // htmk
  

      你好
    
floatt
    

    

  
  
 // css
.relative{
  width: 100px;
  height: 100px;
  background: pink;
  margin-top: -15px;
}

效果如下：

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

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

  

      你好
    
floatt
    

    

  

效果如下：

才有效果，如果都是relative，z-index一样，那么后面会盖前面，z-index值大的会盖住小的。

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

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

效果如下：

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

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

  position: relative;
  z-index: 0;

这时的效果如下：

所以这就解释为什么z-index为负值的时候，它会在 background上面，因为我们 z-index:0 时就创建一个CSS堆叠上下文。

CSS堆叠上下文作用

下面给一个基本的内容：

   // html
  

    
a
      
a1
    
    
b
      
b1
    
  
  // 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;
}

效果如下：

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社区 其它相关文章！