请解释网页元素层叠顺序的决定因素及其基本规则。
考察说明
考察对CSS层叠上下文和层叠顺序的理解。
回答思路
- 【回答框架 1】层叠顺序由层叠上下文决定。在同一个层叠上下文中，元素按从低到高的顺序层叠：背景和边框、负z-index、块级元素、浮动元素、内联元素、z-index:0/auto、正z-index。
- 【回答框架 2】层叠上下文由特定属性创建，如根元素、position值加上z-index非auto、flex/grid容器的子项z-index非auto、opacity小于1、transform非none等。
- 【回答框架 3】比较元素层叠顺序时，先看是否在同一层叠上下文；若不在，则按父层叠上下文的顺序决定，内部顺序不影响外部比较。
- 【回答框架 4】z-index只作用于定位元素（position非static）和flex/grid项目，且数值越大越靠上，相同z-index时DOM顺序靠后者在上。
- 【关键点 1】层叠顺序：背景边框 < 负z-index < 块级 < 浮动 < 内联 < z-index:0/auto < 正z-index。
- 【关键点 2】层叠上下文是决定性因素，创建上下文属性包括position+z-index、opacity<1、transform等。
- 【关键点 3】z-index仅对定位元素和flex/grid项目生效。