关于z-index的那些事儿
这篇技术文章从一个经典的CSS谜题切入：如何在不修改HTML结构、不改动z-index与position属性的前提下，让设置了z-index:1的红色span反而堆叠到其他元素之下？作者通过揭晓答案——为父元素添加一个极小的opacity值（如.99）——引出了对z-index工作原理的深度剖析。 文章的核心在于揭示“堆栈上下文”这一关键概念。作者指出，许多开发者误以为z-index只是简单的数值比较，而忽略了它受元素定位（position）和透明度（opacity）等属性的间接影响。当父元素因设置了opacity小于1而创建新的堆栈上下文时，其所有子元素（无论z-index值多高）都会被限制在这个新的层级范围内，无法突破到上层堆栈中。这就是谜题的解法，也是日常开发中z-index“失灵”的常见根因。 文中进一步梳理了在同一个堆栈上下文中，元素从后到前的排列规则：包括负z-index值的定位元素、非定位元素、z-index为auto的定位元素，以及正z-index值的定位元素等。这些细节帮助开发者在构建复杂UI时，能更精准地预测和控制元素的层叠顺序，避免因误解规则而产生的布局困扰。