【学习笔记】CSS深入理解之z-index

Steven 发布于2019-08-30 15:54 / 2259人阅读

摘要：张鑫旭的深入理解之学习笔记层叠上下文什么是层叠上下文在轴上延伸出一个层级，离父级层叠上下文的顶部更近。遵循后来居上和谁大谁上的层叠原则。

张鑫旭的CSS深入理解之z-index学习笔记

层叠上下文

什么是层叠上下文？
在z轴上延伸出一个层级，离父级层叠上下文的顶部更近。

如何产生层叠上下文？

根元素具有根层叠上下文

z-index不为"auto"的定位元素

一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，

opacity 属性值小于 1 的元素，

transform 属性值不为 "none"的元素，

mix-blend-mode 属性值不为 "normal"的元素，

filter值不为“none”的元素，

perspective值不为“none”的元素，

isolation 属性被设置为 "isolate"的元素，

position: fixed（Chrome等webkit内核浏览器）

在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考这篇文章）

-webkit-overflow-scrolling 属性被设置 "touch"的元素

什么是层叠水平？
层叠上下文中的每个元素都有一个层叠水平，决定同一个层叠上下文中的元素在z轴上的显示顺序。遵循“后来居上”和“谁大谁上”的层叠原则。

层叠顺序

一个层叠上下文内，元素发生层叠时候有着特定的垂直显示顺序，也就是下图显示的层叠规则

层叠上下文的background/border（装饰层）

负z-index的依赖z-index层叠上下文元素

块状盒子（布局）

float浮动盒子（布局）

inline/inline-block水平盒子（内容）

z-index为auto/z-index为0的依赖z-index层叠上下文元素或不依赖z-index的层叠上下文

正z-index的依赖z-index层叠上下文元素

关于“依赖z-index的层叠上下文”
创建层叠上下文的方式前文已列出，定位元素以及父元素为flex定位的元素，必须依赖z-index值才能创建层叠上下位，所以统称为依赖z-index的层叠上下文元素。而其他属性即不依赖z-index的层叠上下文。

z-index和层叠上下文

默认z-index: auto相当于是z-index: 0但不会产生层叠上下文

z-index只对依赖z-index的层叠上下文元素起作用

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

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

https://codepen.io/curlywater...
第一组，蓝色盒子设置opacity:0.8;z-index:2，红色盒子设置transform，证明z-index对不依赖z-index的层叠上下文元素无效
第二组，蓝色盒子relative，红色盒子flex的子元素，两者都未设置z-index，未产生层叠上下文，红色盒子父级为块状盒子，蓝色盒子为z-inedx为auto的层叠上下文元素
第三组，蓝色盒子relative，红色盒子flex的子元素，两者都z-index: 0，产生层叠上下文，后来居上

z-index实践经验

非浮层元素避免设置z-index值（可以通过更改DOM顺序，创建层叠上下文来代替），z-index值不需要超过2

使用负z-index实现可访问性隐藏

专线服务私有云深入理解webrtc之aec 如何深入理解深度学习深入理解系列深入理解linux

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117041.html

【学习笔记】CSS深入理解之absolute

摘要：张鑫旭的深入理解之学习笔记绝对定位的特性绝对定位与浮动相似，都有破坏性和包裹性。利用绝对定位元素脱离文档流的特性，使用动画可以避免大范围的回流和重绘。绝对定位元素拉伸实现宽高自适应，可应用于大范围的布局。《张鑫旭的CSS深入理解之absolute》学习笔记绝对定位的特性绝对定位与浮动相似，都有破坏性和包裹性。浮动的一些应用场景中也可用绝对定位替代绝对定位的行为表现无依赖绝对...

Anleb 2019-08-30 15:54 评论0 收藏0
【学习笔记】CSS深入理解之relative

摘要：张鑫旭的深入理解之对绝对定位元素的限制限制定位限制层次限制，原本对绝对定位元素无效，容器设置的情况下生效的定位特性相对于自身无侵入，不会对其他元素的布局产生影响与与同时存在时，忽视的层叠特性可以提高层叠上下文为具体数值时，限制内部绝对定位张鑫旭的CSS深入理解之relative relative对绝对定位元素的限制限制定位限制层次限制overflow，overflow原本对绝...

nanfeiyan 2019-08-30 15:54 评论0 收藏0
前端笔记之CSS（下）浮动&BFC&定位&Hack

摘要：并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。宋体清除浮动这是专业术语，其实就是需要我们解决浮动带来的影响宋体父元素的高度塌陷宋体。相对定位的参考点是自身。一、浮动 1.1 各个语言的主要知识点 HTML：标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS：　　样式：　　布局：　　　　标准流(标准文档流、普通文档流)：盒子模型(width/height...

番茄西红柿 2019-04-23 11:44 评论0 收藏0
深入学习CSS布局系列（一）布局常用属性

摘要：布局涉及到的属性常用属性值此元素不会被显示它和属性不一样。当所有父元素中的所有元素脱离文档流之后，父元素将失去原有默认的内容高度浮动塌陷配合使用属性规定元素的哪一侧不允许其他浮动元素。 @(CSS技巧)[CSS, 布局] 深入学习CSS布局系列（一）布局常用属性一直感觉自己对CSS的各个属性很了解，可是在前几天一次面试后发现自己真的很多地方感觉自己知道，可是实际上自己并不是真的理解了...

Noodles 2019-08-30 12:53 评论0 收藏0
CSS学习笔记之弹出层

摘要：文本显示为掩码。提交表单的按钮。添加前缀版本弹出层中有一个属性，用于控制元素的在堆叠上下文中的次序。值较大的元素，在堆叠层次中位于值较小的元素上方。默认情况下，所有堆叠元素的的值为，相当于。下拉菜单 display：block，盒子会由收缩包围元素变为扩展填充父元素 position：absolute是相对于父元素的绝对位置，其坐标都是相对于父元素的，比如对齐下拉菜单 .me...

kgbook 2019-08-28 18:00 评论0 收藏0