摘要：张鑫旭的深入理解之学习笔记层叠上下文什么是层叠上下文在轴上延伸出一个层级，离父级层叠上下文的顶部更近。遵循后来居上和谁大谁上的层叠原则。
张鑫旭的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: 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值（可以通过更改DOM顺序，创建层叠上下文来代替），z-index值不需要超过2
使用负z-index实现可访问性隐藏
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117041.html
摘要：张鑫旭的深入理解之学习笔记绝对定位的特性绝对定位与浮动相似，都有破坏性和包裹性。利用绝对定位元素脱离文档流的特性，使用动画可以避免大范围的回流和重绘。绝对定位元素拉伸实现宽高自适应，可应用于大范围的布局。 《张鑫旭的CSS深入理解之absolute》学习笔记 绝对定位的特性 绝对定位与浮动相似，都有破坏性和包裹性。浮动的一些应用场景中也可用绝对定位替代 绝对定位的行为表现 无依赖绝对...
摘要：张鑫旭的深入理解之对绝对定位元素的限制限制定位限制层次限制，原本对绝对定位元素无效，容器设置的情况下生效的定位特性相对于自身无侵入，不会对其他元素的布局产生影响与与同时存在时，忽视的层叠特性可以提高层叠上下文为具体数值时，限制内部绝对定位 张鑫旭的CSS深入理解之relative relative对绝对定位元素的限制 限制定位 限制层次 限制overflow，overflow原本对绝...
摘要：并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。宋体清除浮动这是专业术语，其实就是需要我们解决浮动带来的影响宋体父元素的高度塌陷宋体。相对定位的参考点是自身。 一、浮动 1.1 各个语言的主要知识点 HTML：标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS： 样式： 布局： 标准流(标准文档流、普通文档流)：盒子模型(width/height...
摘要：布局涉及到的属性常用属性值此元素不会被显示它和属性不一样。当所有父元素中的所有元素脱离文档流之后，父元素将失去原有默认的内容高度浮动塌陷配合使用属性规定元素的哪一侧不允许其他浮动元素。 @(CSS技巧)[CSS, 布局] 深入学习CSS布局系列（一）布局常用属性 一直感觉自己对CSS的各个属性很了解，可是在前几天一次面试后发现自己真的很多地方感觉自己知道，可是实际上自己并不是真的理解了...
摘要：把改成，就变成了这样实现边框内圆角多重边框还有下实现多重背景为某一层背景单独设置类似这样的属性等等。裁切路径方案这种方案，当内边距不够宽时，会裁切掉文本。 自适应的椭圆（border-radius的用法） 单独指定水平和垂直半径 长宽固定的元素，可以通过指定宽高的一半，变为椭圆形，格式为两个值用/分开。 width: 100px; height: 80px; border-radi...
阅读 3005·2021-10-13 09:39
阅读 1862·2021-09-02 15:15
阅读 2419·2019-08-30 15:54
阅读 1790·2019-08-30 14:01
阅读 2553·2019-08-29 14:13
阅读 1386·2019-08-29 13:10
阅读 2715·2019-08-28 18:15
阅读 3811·2019-08-26 10:20
