CSS3笔记之定位篇（二，web开发流程

其他属性

• 层叠水平：层叠上下文中的每一个元素都有一个层叠水平，决定了同一个层叠上下文中元素在z轴上的显示顺序

• 层叠水平和z-index不是一个东西，普通元素也有层叠水平。

• 层叠上下文的特性：

1. 层叠上下文可以嵌套，组合成一个分层次的层叠上下文。

2. 每个层叠上下文和兄弟元素独立：当进行层叠变化或渲染的时候，只需要考虑后代元素。

3. 每个层叠上下文是自成体系的：当元素的内容被层叠后，整个元素被认为是在父层的层叠顺序中。

知识点4：层叠顺序 （stacking-order）

background --> 负z-index --> block块状水平盒子 --> float浮动盒子 --> inline/inline-block

–> z-index:auto或z-index:0 --> 正z-index

知识点5：z-index与层叠上下文

• 定位元素默认z-index:auto可以看成z-index:0

• z-index不为auto的定位元素会创建层叠上下文

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

知识点6：其他css属性与层叠上下文

• 能创建层叠上下文的的css属性

<div class="box">

    <div>

      <img src="logo.jpg">

    </div>

</div>

<style>

  .box {

    display: flex;                     // 1.display: flex 与子元素z-index不为auto 配合使用

    background:blue

  }

  .box > div {z-index: 1}

  .box > div > img {

    position: relative; z-index: -1;

  }

</style>



<div class="box">

    <img src="" alt="">

</div>

<style>

  .box {

    background:blue;

    opacity: .5;                       // 2.opacity 不等于 1

    transform: rotate(15deg);          // 3.transform 不等于 none

    mix-blend-mode: screen;            // 4.mix-blend-mode: screen

    filter: blur(5px);                 // 5.filter 不等于 none

    isolation: isolate;                // 6.isolation: isolate

    position: fixed;                   // 7.position: fixed Chrome等bink/webkit内核的浏览器使用

    will-change: transform;            // 8.will-change: transform

    -webkit-overflow-scrolling: touch  // 9.移动端

  }

  .box > div > img {

    position: relative; z-index: -1;

  }

</style>

知识点7：z-index与其他css属性层叠上下文

background --> 负z-index --> block块状水平盒子 --> float浮动盒子 --> inline/inline-block

–> z-index:auto或z-index:0，不依赖z-index的层叠上下文 --> 正z-index

不支持z-index的层叠上下文元素的层叠顺序均是z-index:auto级别；

依赖z-index值创建层叠上下文的情况：