CSS网格中的层叠上下文深度解析_Grid-item的渲染层级

z-index 对 grid-item 不起作用，因其默认未建立层叠上下文；需添加 position: relative 等并设置 z-index 才生效，且受父容器是否创建新层叠上下文（如 transform）制约。 grid-item 的 z-index 为什么不起作用？ 因为 只对「已建立层叠上下文」的元素生效，而默认情况下 grid item 不会自动创建层叠上下文——它只是网格容器里的一个普通子元素，渲染层级由 DOM 顺序和网格绘制规则决定。 常见错误现象： 写在某个 上，但它依然被后面出现的 item 盖住；或者和父容器外的元素（比如固定定位弹窗）混排时层级错乱。 必须给该 item 显式触发层叠上下文：加 （或 / ）+ 如果 item 内部有伪元素（如 ），它们的层级受 item 自身层叠上下文限制，不能突破到外部容器层级 注意 grid 容器本身若设了 或 ，也会创建新的层叠上下文，把所有 item “框死”在里面，此时 item 的 只在该上下文中有效 grid-container 的 transform 怎么影响子项层级？ 是最隐蔽的层叠上下文触发器之一。只要 grid 容器设置了任意非 的 值（哪怕只是 ），它就立刻成为一个新的层叠上下文根节点。 使用场景：做动画、视差滚动、或绕过某些浏览器渲染 bug 时习惯加 ，但没意识到这会让整个 grid 的渲染层级“自成一派”。 立即学习 “ 前端免费学习笔记（深入） ”； 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 容器内所有 grid item 的 比较只在该容器内部有效，无法和容器外其他元素（如 的导航栏）直接比大小 若需跨容器控制层级，要么去掉容器的 ，要么把需要“浮出来”的元素移出 grid 结构（用 portal 或绝对定位模拟） Chrome 和 Safari 对 的处理也类似，同样会隐式创建层叠上下文 多个 grid-item 重叠时，谁在上面？ 当没显式设置 或层叠上下文时，grid item 的默认绘制顺序由两个因素共同决定：DOM 顺序 + 网格轨道位置。但后者仅在「同一网格区域」内起作用。 容易踩的坑：以为 的 item 一定盖在 的 item 上面——其实不是。CSS Grid 的绘制顺序优先看 HTML 中的兄弟顺序，再看是否落在同一网格单元格里。 如果两个 item 占据完全相同的网格区域（比如都设了 ），那么 DOM 中靠后的那个默认在上层 如果它们占据不同区域（比如一个在第1行，一个在第2行），即使视觉上重叠（因设置了 或 移动），也不触发网格内的层叠比较，而是按常规块级流规则叠加 此时若想强制控制，必须让它们处于同一层叠上下文中，并用 明确排序 grid + position: sticky 的层级陷阱 的元素在粘性生效时会脱离文档流并提升层级，但它是否能盖过同 grid 容器内的其他 item，取决于它有没有被包裹进一个新的层叠上下文。 典型问题：sticky 头部写在 grid item 里，滚动时被下方另一个 grid item 盖住，尤其在 Safari 中更明显。 sticky 元素本身不会自动创建层叠上下文，所以它的层级仍受父 grid 容器约束 解决办法是给 sticky 元素加 + ，同时确保其父 grid item 没有 或更低值（否则会把它压在下面） 更稳妥的做法是让 sticky 区域脱离 grid 布局：用 配合 ，并将其从 grid 容器中移出，改用 或 wrapper 调整结构 事情说清了就结束。真正难的不是记住规则，而是每次改样式时，都要下意识问一句：“这个元素此刻属于哪个层叠上下文？”——浏览器不会告诉你，但错位的遮挡就是答案。