CSS深入理解z-index(z-index相关知识总结)
一、z-index基础内容(入门级掌握)
1.z-index含义:
z-index属性指定了元素及其子元素的【z顺序】,而【z顺序】可以决定当元素发生覆盖的时候,哪个元素在上面。通常一个较大z-index值的元素会覆盖较低的那一个
2.z-index支持的属性值:
3.z-index的特性:
4.特殊点:
如果不考虑CSS3,只有标记了定位元素position的z-index才有作用,但在CSS3中有例外
二、多个定位元素(应用级掌握)
1. 如果定位元素z-index没有发生嵌套:
①后来居上的准则;
②哪个大,哪个上;
①后来居上 (即默认按照dom元素排列的先后顺序,靠后的dom元素排列居上):
②哪个大,哪个上(当设置有z-index的时候,按照z-index的值排列,值越大,越靠上):
2. 如果定位元素z-index发生嵌套:
①祖先优先原则;
②特殊情况;
①祖先优先原则(当有外层包裹发生嵌套的时候,两个元素的层级比较依赖于祖先的z-index值大小):
②特殊情况(当z-index的值为auto时,当前层叠上下文的生成盒子层叠水平为0,盒子(除非是根元素)不会创建一个新的层叠上下文,因此内层的z-index:2;起了作用,在下文中,我们会对层叠上下文及层叠水平等内容进行详细介绍,稍安勿躁):
三、理解CSS中的层叠上下文和层叠水平(进阶内容掌握)
1. 概念:
层叠上下文(stacking context)是HTML元素中的一个三维概念,标识元素在Z轴上有了“可以高人一等”。
- 页面根元素天生具有层叠上下文,称之为“根层叠上下文”。
- z-index值为数值的定位元素也具有层叠上下文。
- 其他属性
层叠上下文中的每个元素都有一个层叠水平(stacjing level),决定了同一个层叠上下文中元素在z轴上的显示顺序。
遵循“后来居上”和“谁上谁大”的原则。
层叠水平必须放在层叠上下文中来看,层叠水平和z-index并不是一个概念。
2. 层叠上下文的特性:
①层叠上下文可以嵌套,组合成一个分层次的层叠上下文。
②每个层叠上下文和兄弟元素独立:当进行层叠变化或渲染的时候,只需要考虑后代元素。
③每个层叠上下文是自成体系的:当元素的内容被层叠后,整个元素被认为是在父层的层叠顺序中。
3. 层叠水平:
①著名的7阶层叠水平(规范层叠,更符合页面加载的功能和视觉呈现)
4. Z-index 与层叠上下文:
①特性:
- 定位元素默认z-index:auto可以看成是z-index:0;
- z-index不为auto的定位元素会创建层叠上下文;
- z-index层叠顺序的比较止步于父级层叠上下文;
②为何定位元素会覆盖普通元素?
此时,右边的元素覆盖左边的元素,满足了基本的元素后来居上原则。
可是当给左边元素添加定位属性的时候,该元素跑到了上方,这是为什么呢?可以思考一个问题,此时a元素的z-index值是什么呢? 前面说过,如果z-index不做设置,当有定位属性的时候,默认为z-index:auto; 也就是z-index为0。而根据层叠水平规则,z-index:auto是在inline(图片)之上的,因此会反转覆盖。
③z-index与创建层叠上下文:
此时根据层叠水平规则, inline在block之上。
当给img添加z-index: -1的属性时,box跑到了img的前面,按理说根据层叠水平规则,z-index负值的层叠顺序在层叠上下文元素背景色之上,但看起来似乎有违规则,其实不然,这是因为,box只是普通元素,并不具备自身的层叠上下文,而普通元素的层叠规则在z-index:-1之上。
当继续给box添加z-index:0的属性时,此时图片的层叠上下文元素就变成了容器,img就又跑到了box的前面 ,虽然box的z-index大于img,但根据层叠水平规则,box的背景色(前提是具有容器的层叠上下文)会在img之下。
从层叠顺序上讲,z-index:auto;可以看成z-index:0;。但是从层叠上下文来讲,两者却有着本质差异!auto不会创建层叠上下文,但是0会创建。
④z-index受限于层叠上下文:
尽管box1的img的z-index很高,但是由于他的层叠上下文box1的z-index下雨box2的z-index,因此会处于下方。这就是z-index受限于层叠上下文的体现。
5.其他CSS属性与层叠上下文
①其他CSS属性与层叠上下文总览
②display:flex与层叠上下文
由于box不具有层叠上下文,因此img直接穿过box背景达到根元素的层叠上下文。
当给box添加flex属性的时候,情况翻转。这个并不能说是flex给box添加了层叠上下文而导致了这种情况,而是因为flex当前元素的子元素的z-index不为auto,因此让box具备层叠上下文。
③opacity≠1与层叠上下文
可以看到当给box添加不等于1的opacity属性时,图片到了上方,这就说明,opacity≠1可以给元素添加层叠上下文。
④transform的值不为none
因此说明,transform不为none的情况下会给box元素添加层叠上下文。
⑤mix-blend-mode≠normal与层叠上下文(同上)
⑥filter≠none与层叠上下文(同上)
⑦isolation:isolate与层叠上下文(同上)
⑧position:fixed与层叠上下文(同上,但只有Chrome等blink/webkit内核浏览器会出现这类现象)
⑨will-change与层叠上下文(同上)
6.z-index与其他CSS属性层叠上下文
①不支持z-index的层叠上下文元素的层叠顺序均是z-index:auto级别
因此,上图是更为准确和详细的层叠规则。
②依赖z-index的层叠上下文元素的层叠顺序取决于z-index值
依赖z-index值创建层叠上下文的情况:
- position值为relative/absolute或fixed(部分浏览器)
- display:flex|inline-flex容器的子flex项
③层叠上下文有趣的现象
opacity:1普通图片,其他opacity值则新建层叠上下文,层叠顺序z-index:auto级别,跟absolute文字一样,但遵循后来居上准则,于是,淡出的时候,文字是看不见的,直到动画结束(此时opacity值为1)
四、z-index相关实践(实践掌握)
1.最小化影响原则
目的:
避免z-index嵌套层叠关系混乱
原因:
1.元素的层叠水平主要是由所在的层叠上下文决定;
2.IE7 z-index:auto也会新建层叠上下文;
做法:
1.避免使用定位属性;
2.定位属性从大容器平级分离为私有小容器;
2.不犯二准则
目的:
避免z-index混乱,一山比一山高的样式问题。
原因:
多人协作以及后期维护。
做法:
对于非浮层元素,避免设置z-index值,z-index值没有任何道理需要超过2——不犯二准则。
3.组件层级计数器
目的:
避免浮层组件因z-index被覆盖的问题。
原因:
1.总会遇到意想不到的高层及元素;
2.组件的覆盖规则具有动态性;
做法:
通过js获得body下子元素的最大z-index值
4.可访问性隐藏
概念:
人肉眼看不见,但是辅助设备可以识别。
做法:
使用z-index负值元素在层叠上下文的背景之上,其它元素之下。
此文为博主的学习总结,参考链接:https://www.imooc.com/video/11625
CSS深入理解z-index(z-index相关知识总结)相关推荐
- HTML入门基础教程相关知识
HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...
- css索引_CSS中的Z索引:它是什么以及它做什么
css索引 什么是Z索引? (What is a Z Index?) Z Index (z-index) is a CSS property that defines the order of ove ...
- Cordova工程index.html/index.css/index.js结构及关键代码
Cordova工程index.html/index.css/index.js结构及关键代码 1. index.html 2. index.css (1)横竖屏的判断方法: (2)深色模式适配 3. i ...
- 自学c语言中相关知识,设计出医院住院管理系统.要求如下所述:,C语言课程设计题Z目.doc...
C程序课程设计 题目及任务 设计题目.任务 从以下三个题目中任选一个 题目一:汽车售票系统 任务:自学C语言中相关知识,设计出汽车售票系统.要求如下所述: 每天"武汉火车站→天河机场&quo ...
- 学习笔记之CSS深入理解(慕课网 张鑫旭主讲)
一.CSS深入理解之border 1. border-width不支持百分比 受语义和使用场景决定的,不会因为设备大而边框变大的 2. border-style属性 border-style:dott ...
- CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)
BFC的理解与应用 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威和正确的,而且还比较详细,千万不要因为看到英文就畏惧 ...
- html中index函数,INDEX函数.doc
INDEX函数 INDEX函数(有数组和引用两种用法.) 贡献者:HYPERLINK "/space-uid-1450717.html"843211 日期:2008-07-22 阅 ...
- CSS深入理解之line-height
以下文字整理自慕课网--张鑫旭的<CSS深入理解之line-height>. 一.line-height的定义 line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这 ...
- index++和index+1严重区别
大家好!这个index++和index+1看似非常简单的理解,也许会认为就算发生错误,我也可以很容易的发现,但是当这样用的时候,就会出现逻辑错误了. self.noLabel.text = [NSSt ...
- hdu4282 x^z+y^z+x*y*z=k 解的个数
题意: x^z + y^z + x*y*z = k; (x < y ,z > 1),给你一个k问有多少组解. 思路: 暴力枚举z,y,然后二分查找x.注意一点最好用 ...
最新文章
- 比特币现金支付接入日本便利店
- QT 信号与槽 最简单例子
- 2021-07-24
- ContentValues和HashTable和HashMap和properties
- C语言以递归实现归并排序Merge Sort算法(附完整源码)
- Poj2449 Remmarguts' Date 【A*搜索】K短路
- InfluxDB-Python 操作实践
- 如何成为优秀的科学家
- EMNLP杰出论文 | 当注意力遇到RNN,五倍以上训练加速!
- iscsi多路径配置方式
- 工具说明书 - 网页内容抓取工具Web Scraper(一)
- su室外渲染参数设置_【QA答疑】VRay3.4 for SketchUp2017 渲染参数设置
- matplotlib中堆积图、分块图、气泡图的绘制
- SolidWorks用鼠标中键控制模型的旋转、缩放和平移
- 1980-2018年中国及世界各国实际利率数据
- 2021年最新AZ自动发卡网源码-全网首发
- 什么是ISO镜像文件,为什么不能拷贝到U盘直接重新安装?
- python vimdiff_Vimdiff---VIM的比较和合并工具
- java计算机毕业设计校园共享单车系统源代码+系统+数据库+lw文档
- EXCEL中对1个单元格中多个数字求和