z-index属性控制定位元素的堆叠顺序，需配合relative、absolute、fixed或sticky使用，值越大越靠前；1. 设置定位上下文并为子元素设置position和z-index；2. 堆叠上下文由opacity、transform等触发，限制子元素层级范围；3. 默认渲染顺序为背景边框→负z-index→块级盒→浮动盒→行内盒→z-index:auto/0→正z-index，未设z-index按HTML顺序后出现的覆盖前一个。
当您在使用CSS进行网页布局时，可能会遇到多个元素重叠的情况。为了控制这些重叠元素的显示顺序，CSS提供了特定的机制来定义它们的堆叠层级。以下是关于CSS定位中叠放次序的具体说明：
本文运行环境：MacBook Pro，macOS Sonoma
一、理解z-index属性的作用
z-index 属性用于控制定位元素在Z轴上的堆叠顺序。只有当元素的 position 值为 relative、absolute、fixed 或 sticky 时，z-index 才会生效。该属性的值越大，元素越靠近用户，即显示在更上层。
1、设置一个定位上下文，例如将父容器的 position 设置为 relative。
立即学习“前端免费学习笔记（深入）”；
2、对需要调整层级的子元素应用 position: absolute; 并赋予不同的 z-index 数值。
3、z-index 只能在已定位元素上起作用，静态定位（position: static）下无效。
二、利用定位上下文控制层级范围
CSS中的堆叠上下文（Stacking Context）会影响 z-index 的作用范围。每个堆叠上下文独立管理其内部元素的层叠顺序。创建新的堆叠上下文可以通过 opacity、transform、flex 子项或设置了 z-index 的定位元素实现。
1、注意父级是否形成了独立的堆叠上下文，这会限制子元素的 z-index 仅在该上下文中有效。
2、若两个元素属于不同的堆叠上下文，则外层上下文的整体层级决定其内部所有元素的显示优先级。
3、即使子元素 z-index 很高，也无法超出其父级堆叠上下文的层级限制。
三、默认堆叠顺序规则
在没有设置 z-index 的情况下，浏览器按照一定的默认顺序渲染元素。这一顺序从后往前依次是：背景和边框、负 z-index、块级盒模型、浮动盒、行内盒、z-index: auto 或 0、正 z-index。
1、未设置 z-index 的定位元素被视为 z-index: auto，处于标准流之上但低于正 z-index 元素。
2、负 z-index 值可使元素位于标准文档流之下。
3、相同层级下，HTML 中靠后的元素会覆盖靠前的元素。
