CSS3笔记之定位篇（二）z-index

最新推荐文章于 2023-02-08 10:53:47 发布

IT淘金者

最新推荐文章于 2023-02-08 10:53:47 发布

阅读量272

点赞数 1

分类专栏： HTML5/CSS3 HTML5/CSS3布局专栏文章标签： CSS3 z-index 定位层级

本文链接：https://blog.csdn.net/u013205165/article/details/83795510

版权

HTML5/CSS3 同时被 2 个专栏收录

31 篇文章 3 订阅

订阅专栏

HTML5/CSS3布局专栏

13 篇文章 0 订阅

订阅专栏

知识点1：z-index基础

z-index：auto; 默认值
z-index: <integer> 整数
z-index: inherit 继承
不考虑css3 还有定位元素的z-index才有作用

知识点2：z-index与定位元素

无嵌套：后来居上，哪个大哪个上

//在没有添加z-index属性时，如果两个图片有重叠，默认为图片2覆盖图片1   “后来居上”
//如果添加了z-index，则那个元素的z-index值大，那个在最上面    “哪个大哪个上”
<img src="图片1" style="position: relative; z-index: 2">
<img src="图片2" style="position: absolute; z-index: 1">

有嵌套：祖先优先原则（z-index: 数字）

//虽然图片1的z-index大于图片2的z-index,但是对于嵌套的定位元素z-index遵循祖先优先原则，所以图片2优先显示
<div style="position: relative; z-index: 1"> //祖先元素的z-index不能为auto
    <img src="图片1" style="position: relative; z-index: 2">      
</div>
<div style="position: relative; z-index: 1"> //祖先元素的z-index不能为auto
    <img src="图片2" style="position: absolute; z-index: 1">      
</div>

知识点3：层叠上下文（stacking-context）和层叠水平（stacking-level）（重要）

层叠上下文：

页面根元素天生具有层叠上下文，称之为“根层叠上下文”

z-index值为数值的定位元素也具有层叠上下文

其他属性

层叠水平：层叠上下文中的每一个元素都有一个层叠水平，决定了同一个层叠上下文中元素在z轴上的显示顺序
层叠水平和z-index不是一个东西，普通元素也有层叠水平。
层叠上下文的特性：

层叠上下文可以嵌套，组合成一个分层次的层叠上下文。
每个层叠上下文和兄弟元素独立：当进行层叠变化或渲染的时候，只需要考虑后代元素。
每个层叠上下文是自成体系的：当元素的内容被层叠后，整个元素被认为是在父层的层叠顺序中。

知识点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