美文网首页
层叠上下文和z-index

层叠上下文和z-index

作者: pawN_f294 | 来源:发表于2018-02-08 23:32 被阅读0次

    一、层叠上下文 MDN

    层叠上下文 是指网页上的元素如何显示在其他元素之上,就像您可以将桌面上的索引卡并排放置或相互重叠一样。

    当元素重叠的时候,会按照以下规则优先显示在离用户更近的地方,如果两个元素为普通元素,在没有以下指定特性的情况下,会按照后来居上的规则进行覆盖。

    image.png

    二、机制

    • 以下行为会建层叠上下文


      image.png
    定位元素和flex项可以设置z-index来控制层叠顺序
    其他方法的z-index为0级别,遵循后来居上原则
    • 每一个元素都有自己的层叠上下文环境,默认的是根元素,也就是HTML元素,但是为一个元素创建层叠上下文时候,该元素就成了该元素的所有子元素的层叠上下文环境。
    .box {
      width: 100px;
      height: 200px;
      background: red;
      position: relative;
    }
    .box img {
      width: 200px;
      position: absolute;
      z-index: -1;
    }
    
    image.png

    为什么图片会在他的父元素背景的下面呢?

    那是应为上面说的所有元素默认的层叠上下文环境是根元素,按照我们层叠图来看负值的z-index层叠元素会在块级元素的后面,所以图片会跑到父元素的后面,但是只要为把它的父元素变成层叠元素,他的所有子元素就都会重新依赖于该父元素进行排序重叠。

    .box {
      width: 100px;
      height: 200px;
      background: red;
      position: relative;
      z-index: 0; // 把z-index修改为0,就可以创层叠上下文。
    }
    
    image.png
    • 层叠上下文的一些行为


      image.png

    1.定位元素默认z-index: auto可以看成是z-index:0;

    如果普通元素与层叠上下文元素发生重叠的时候,具有层叠上下文的元素会覆盖普通元素。

    .a {
      width: 100px;
      height: 200px;
      background: red;
    }
    .b {
      width: 100px;
      height: 100px;
      background: yellow;
      position: relative;
      top: -150px;
    }
    
    image.png

    2、z-index层叠顺序的比较止步于父级层叠上下文

    层叠上下文是可以嵌套的,也就是一个层叠上下文元素的子元素可以建立自己的层叠上下文。但是该元素的层叠上下文不作用于父级上下文之外,该上下文只作用于该父级层叠上下文里面。

    .a {
      width: 100px;
      height: 100px;
      background: red;
      position: relative;
      z-index: 1;
    }
    .a .img {
      position: absloute;
      z-index: 999;
    }
    .b {
      width: 100px;
      height: 100px;
      position: relative;
      top: -10px;
      z-index: 1;
    }
    .b .img {
      position: absloute;
      z-index: -1;
    }
    
    image.png

    我们会发现就算.a盒子里面的图片设置很大的z-index还是被设置-1的.b盒子里面的图片给覆盖,原因是.a和.b和都设置为层叠上下文元素,而b的层叠顺序比较高。

    相关文章

      网友评论

          本文标题:层叠上下文和z-index

          本文链接:https://www.haomeiwen.com/subject/secttftx.html