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

知识点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 不等于 1transform: rotate(15deg);          // 3.transform 不等于 nonemix-blend-mode: screen;            // 4.mix-blend-mode: screenfilter: blur(5px);                 // 5.filter 不等于 noneisolation: isolate;                // 6.isolation: isolateposition: 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值创建层叠上下文的情况：

position值为relative/absolute或fixed（部分浏览器）
display：flex/inline-flex容器的子flex项

知识点8：z-index相关实践分享

最小化影响原则

目的：避免z-index嵌套层叠关系混乱
原因：
1. 元素的层叠关系主要由所在的层叠上下文决定
2. IE7 中z-index为auto也会创建层叠上下文
做法：
1. 避免使用定位属性
2. 定位属性从大容器平级分离为私有小容器

不犯二准则

目的：避免z-index混乱，出现一山又比一山高的样式问题
原因：多个协作以及后期维护
做法：对于任何非浮层元素，避免设置z-index值，z-index值没有任何道理需要超过2

组件层级计数器

目的：避免浮层组件因z-index被覆盖的问题
原因：
1. 总会遇到意想不到的高层及元素
2. 组件的覆盖规则具有动态性
做法：组件层级计数器方法（JS获取最大z-index,再加1）

可访问性隐藏：人肉眼不可见，但是辅助设备可以识别。

z-index负值元素在层叠上下文的背景之上，其他元素之下

CSS3笔记之定位篇（二）z-index相关推荐

CSS3笔记之定位篇（一）relative
知识点1:relative和absolute relative: 相对自身,并会限制内部absolute元素层叠 absolute: 相对容器,并受到父类容器relative的影响,比如:overfl ...
CSS3笔记之基础篇（二）颜色和渐变色彩
效果一.颜色之RGBA RGB是一种色彩标准,是由红(R).绿(G).蓝(B)的变化以及相互叠加来得到各式各样的颜色.RGBA是在RGB的基础上增加了控制alpha透明度的参数. 语法: color: ...
CSS3笔记之基础篇（三）文字与字体
要点一.text-overflow与word-wrap text-overflow:设置是否使用一个省略标记(...)标示对象内文本的溢出. word-wrap:设置文本行为,当前行超过指定容器的边界 ...
CSS3笔记之基础篇（一）边框
效果一.圆角效果 border-radius 实心上半圆: 方法:把高度(height)设为宽度(width)的一半,并且只设置左上角和右上角的半径与元素的高度一致(大于也是可以的). div {he ...
PostCSS自学笔记（二）【番外篇二】
图解PostCSS的插件执行顺序文章其实是一系列的早就写完了. 才发现忘了发在SegmentFault上面, 最早发布于https://gitee.com/janking/Inf... 这次我继续研 ...
2022黑马Redis跟学笔记.实战篇(二)
2022黑马Redis跟学笔记.实战篇二实战篇Redis 开篇导读 4.1短信登录 4.1.1. 搭建黑马点评项目一.导入黑马点评项目二.导入SQL 三.有关当前模型四.导入后端项目相关依 ...
基于ArUco的视觉定位（二）（转载）（这篇很详细地讲清楚了原理）
转载自:https://blog.csdn.net/lixujie666/article/details/80251271?spm=1001.2014.3001.5501 基于ArUco的视觉定位(二 ...
PHP自学笔记(基础语法篇)
本文章是我在b站上自学PHP的学习笔记,如果有错误,欢迎大家改正,谢谢. 文章目录 1. PHP介绍 1.1 什么是PHP 2. 认识PHP脚本程序 2.1 PHP语言标记(四种定界符) 2.2 结束 ...
最最详细的黑马前端HTML5+CSS3笔记，给大家整理好了
基于黑马前端视频学习的CSS3笔记,每一天的知识点都放在一起,方便学习查阅 ==CSS第一天== 一.css简介二.css语法规范三.css代码风格四.css选择器的作用五.css基础选择器 ...

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

CSS3笔记之定位篇（二）z-index相关推荐

最新文章

热门文章