前端 CSS 面试题, z-index 属性在什么情况下会失效?
前端 CSS 面试题, z-index 属性在什么情况下会失效?
QA
Step 1
Q:: z-index 属性在什么情况下会失效？
A:: z-index 属性在以下情况下会失效：1. 没有设定定位（position: relative, absolute, fixed, 或 sticky），即元素是 position: static 的。2. 当 z-index 设定的值没有生效的原因可能是 z-index 的值在父元素的上下文中已经被覆盖或没有影响。3. 元素处于不同的 stacking context（层叠上下文）中时，z-index 的比较只在相同的上下文中有效，若元素处于不同的上下文中，则较低的上下文中的 z-index 值可能无法影响较高上下文中的元素。
Step 2
Q:: 什么是 stacking context（层叠上下文）？如何创建它？
A:: Stacking context 是一个三维概念，影响元素的层叠顺序。每个 stacking context 是相对独立的，元素只会在其所在的 stacking context 内与其他元素进行 z-index 比较。可以通过以下方式创建 stacking context：1. 根元素 (html)，2. 具有 position 属性值为 relative, absolute, fixed, 或 sticky 且 z-index 值不为 auto 的元素，3. 元素的 opacity 属性值小于 1，4. 元素设置了 transform, filter, 或者 perspective 等属性。
Step 3
Q:: 如何调试 z-index 的问题？
A:: 调试 z-index 的问题可以从以下几个方面入手：1. 检查元素的 position 属性，确保元素有合适的定位。2. 确认元素是否在同一个 stacking context 中，如果不在，需要调整父元素的 z-index 或者创建新的 stacking context。3. 使用浏览器的开发者工具查看元素的层叠顺序和上下文。4. 检查父元素是否对 z-index 产生了影响。
Step 4
Q:: 在 CSS 中，哪些情况下会使用 z-index 属性？
A:: z-index 属性主要用于处理元素之间的叠加顺序。常见的使用场景包括：1. 在模态框、弹出层、工具提示等需要覆盖页面其他内容时使用。2. 创建多层次的布局，例如带有多个重叠图片或文字的设计。3. 处理浮动元素的层级问题，避免内容被遮挡。