css堆叠-堆叠上下文（转载）

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

本文在介绍堆叠上下文之前尝试解释一下堆叠顺序是什么。

MDN 是这样解释堆栈上下文的：

级联上下文是 HTML 元素的三维概念，它在相对于面向（笔记本屏幕）窗口或网页的用户的假想 z 轴上延伸。 HTML元素根据自己的属性按优先级顺序占据级联上下文空间。

通常我们浏览网页时，我们可以理解为从网页的正面查看。 在理解堆叠上下文时，我们尝试从侧面来理解。 方方老师说CSS一个非常重要的学习方法就是实验方法。 本文力图使所有的推论都有实验依据。 （您好，希望您可以跳过重播……）

首先我们来思考一下边框和背景的关系：

  



    .demo{
      width: 100px;
      height: 100px;
      border: 10px solid rgba(255,0,0,0.5);
      background: green;
    }

功效图：

可见，背景<border；接着css堆叠，我们在父元素里加一个div，观察一下border和子元素div的关系：

  

    

  


    .parent{
      width: 100px;
      height: 100px;
      border: 10px solid red;
    }
    .child{
      width: 30px;
      height: 30px;
      background: blue;
      margin-left: -5px;
    }

功效：

由此可以得出，borderdiv==>浮动元素==>内联元素==>定位元素==>z-index>0，以上8层。

如果我们将position:relative设置为z-index:-1的父元素，我们会发现子元素中z-index:-1的元素已经被移动到了背景和div的下面。

    

    

    



    .parent{
      width: 100px;
      height: 100px;
      border: 10px solid red;
      position: relative;
      background: rgba(0,255,0,0.5);
      z-index: 0;
    }
    .child{
      width: 40px;
      height: 40px;
      background: rgba(30,30,230,0.5);
    }
    .relative{
      width: 30px;
      height: 30px;
      background: orange;
      position: absolute;
      left: 30px;
      top: 10px;
      z-index: -1;
    }
    .absolute{
      width: 40px;
      height: 40px;
      background: black;
      position: absolute;
    }

功效：

这是为什么呢css堆叠，我们只是从引入堆叠顺序过渡到了堆叠上下文的概念吧？ 。 。

由于position:relative和z-index不会为auto生成堆栈上下文，因此relative类的元素应该位于parent生成的堆栈上下文之上。

mdn上列出了几种生成stacking context的情况：