CSS深入理解学习笔记之z-index
1、z-index基础
z-index含义:指定了元素及其子元素的”z顺序“,而”z顺序“可以决定元素的覆盖顺序。z-index值越大越在上面。
z-index值:auto(默认值);integer(整数值);inherit(继承)。
z-index基本特性:①支持负值;②支持CSS3 animation动画;③在CSS2.1时代,需要和定位元素配合使用。
2、z-index与定位元素
z-index值越大越在上面。
如果定位元素z-index发生嵌套:祖先优先原则,前提是祖先的z-index值是数值,不是auto
3、层叠上下文与层叠水平
层叠上下文:是HTML元素中的一个三维概念,表示元素在z轴上的层叠表现。
具有层叠上下文的元素:①页面根元素天生具有层叠上下文,称之为”根层叠上下文“;②z-index值为数值的定位元素也具有层叠上下文;③其他属性
层叠水平:层叠上下文的每个元素都有一个层叠水平,决定了同一个层叠上下文中元素在z轴上的显示顺序。遵循“后来居上”和“谁大谁上”的层叠准则。层叠水平和z-index不是同一个东西,普通元素也有层叠水平。
层叠上下文特性:①层叠上下文可以嵌套,组合成一个分层次的层叠上下文;②每个层叠上下文和兄弟元素独立,当进行层叠变化或渲染的时候,只需要考虑后代元素;③每个层叠上下文是自成体系的,当元素的内容被层叠后,整个元素被认为是在父层的层叠顺序中。
4、层叠顺序
含义:元素发生层叠时候有着特定的垂直显示顺序。
著名的7阶层叠水平:
5、z-index与层叠上下文
⑴ 从层叠顺序上讲,定位元素默认z-index:auto可以看成是z-index:0,但是从层叠上下文来讲,两者却有着本质的差异;
⑵ z-index不为auto的元素会创建层叠上下文;
⑶ z-index层叠顺序的比较止步于父级层叠上下文。
为何定位元素会覆盖普通元素:具有定位属性的元素,z-index值为auto可以看为0,z-index:auto的层叠顺序>inline水平盒子。
z-index与创建层叠上下文:z-index不是auto的情况下,元素会创建层叠上下文。(IE8+)
z-index受限于层叠上下文:父元素z-index为数值的情况下,会优先展现层叠顺序。
6、其他属性与层叠上下文
其他参与层叠上下文的属性:①z-index值不为auto的flex项(父元素display:flex|inline-flex);②元素的opacity值不是1;③元素的transform值不是none;④元素mix-blend-mode值不是normal;⑤元素的filter值不是none;⑥元素的isolation值是isolate;⑦position:fix声明;⑧will-change指定的属性值为上面任意一个;⑨元素的-webkit-overflow-scrolling设为touch。
7、z-index与其他属性层叠上下文
不支持z-index的层叠上下文元素的层叠顺序均是z-index:auto级别:
依赖z-index的层叠上下文的层叠顺序却决于z-index值。
8、z-index相关实践分享
最小化影响原则:
不犯二准则:
组件层级计数器:
通过JS获得body下子元素的最大z-index值。
负值z-index与可访问性隐藏:
可访问性隐藏:人肉眼不可见,但是辅助设备可以识别。
CSS深入理解学习笔记之z-index的更多相关文章
- CSS深入理解学习笔记之absolute
1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...
- CSS深入理解学习笔记之float
1.float的历史 float设计的初衷仅仅是为了文字环绕效果. 示例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- CSS深入理解学习笔记之vertical-align
1.vertical-align基本认识 支持的属性值: ①线类:baseline(默认),top,middle,bottom ②文本类:text-top,text-bottom ③上标下标类:sub ...
- CSS深入理解学习笔记之margin
1.margin与容器尺寸 元素尺寸:①可视尺寸 clientWidth(标准):②占据尺寸 margin与可视尺寸:①适用于没有设定width/height的普通block元素:②只适用于水平方向尺 ...
- CSS深入理解学习笔记之overflow
1.Overflow基本属性 overflow:visible(默认)/hidden/scroll/auto/inherit; visible:超出部分可见. hidden:超出部分隐藏. scrol ...
- CSS深入理解学习笔记之line-height
1.line-height的定义 定义:两行文字基线之间的距离. 注:不同字体之间的基线是不同的. 2.line-height与行内框盒子模型 行内框盒子模型: ①内容区域(content area) ...
- CSS深入理解学习笔记之relative
1.relative和absolute的相煎关系 限制作用:①限制left/top/right/bottom定位:②限制z-index层级:③限制在overflow下的嚣张气焰. relative和f ...
- CSS深入理解学习笔记之padding
1.padding与容器尺寸之间的关系 对于block水平元素:①padding值暴走,一定会影响尺寸:②width非auto,padding影响尺寸:③width为auto或box-sizing为b ...
- CSS深入理解学习笔记之border
1.border-width border-width为何不支持百分比:语义和使用场景决定的,现实中各种边框本身的概念就不存在百分比的使用方法. border-width支持关键字:thin.medi ...
随机推荐
- 【漏洞分析】dedecms有前提前台任意用户密码修改
0x00 前言 早上浏览sec-news,发现锦行信息安全发布了一篇文章<[漏洞分析] 织梦前台任意用户密码修改>,看完之后就想着自己复现一下. 该漏洞的精髓是php的弱类型比较,'0. ...
- 用纯CSS画大白
纯CSS打造网页大白知识点: 首先要把大白分割,整体baymax中包含header(eye1,eye2,mouth),torso(heart),belly(cover),l-bigfinge ...
- (5编译使用最新opencv)从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练
从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练 1综述http://www.cnblogs.com/jsxyhelu/p/7907241.html 2环境架设http://www.c ...
- Vue2.0 相对于Vue1.0的变化:生命周期
1.生命周期 根据提供的生命周期钩子说明Vue.js实例各个阶段的情况,Vue.js 2.0对不少钩子进行了修改,以下说明:(灰色字体代表是 2.0已经废弃或者被更名的钩子,黑色字体代表1.0 和2. ...
- Haproxy原理(1)
一.四层和七层负载均衡的区别 所谓的四层就是ISO参考模型中的第四层.四层负载均衡也称为四层交换机,它主要是通过分析IP层及TCP/UDP层的流量实现的基于IP加端口的负载均衡.常见的基于四层的负载均 ...
- NOIP2017游记
日常大考之前感冒(这次感冒了3周..) Day -4~Day 0 停课一周,不写作业不上课是很爽,然而想到NOIP结束第二天就要期中考.. 在学校刷刷题,跟着一大堆大佬的步伐,做着一大堆大佬的题目(其 ...
- sqlmap完成简单的sql注入
扫描目标站点,是否存在注入 --users获取用户名 --dump --tables探测表和数据库信息 跑出来的字段 admin --dump -T admin -C admin,password暴库 ...
- Codeforces 842B Gleb And Pizza【几何,水】
B. Gleb And Pizza time limit per test:2 seconds memory limit per test:256 megabytes input:standard i ...
- 三维dp&codeforce 369_2_C
三维dp&codeforce 369_2_C 标签: dp codeforce 369_2_C 题意: 一排树,初始的时候有的有颜色,有的没有颜色,现在给没有颜色的树染色,给出n课树,用m种燃 ...
- Codeforces Round #328 (Div. 2)_A. PawnChess
A. PawnChess time limit per test 1 second memory limit per test 256 megabytes input standard input o ...