使用可视化工具学习 Z-Index

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

Thiru Manikandan 这里有一些很酷的交互式演示。z-index有一些非常棘手的事情,总是让人感到困惑。除了需要定位和源顺序等因素外,最棘手的是堆叠上下文和父子关系。z-index 不是一个公平的竞争环境。即使您在元素上设置了z-index: 2147483644¹,也可能没有任何效果,因为该元素可能位于具有自身堆叠上下文且z-index低于兄弟元素或某些更高级别 DOM 元素的父元素内部。

  1. 仅比最大值 2147483647 小 3。哈哈。感谢 Dan Danney 最近提到了在实际应用中看到这种情况。

直达链接 →