《CSS面试试题经典——层叠上下文》

2023-09-05 08:19:17

CSS 层叠上下文：z-index 失效的内幕剖析

身为前端开发人员，我们都熟稔 CSS 的层叠规则，其中 z-index 属性是掌控元素叠放顺序的重中之重。然而，令人费解的是，有时我们会遭遇 z-index 失效的情景，纵使设置了较高的 z-index 值，元素依然屈居于其他元素之下。究竟是什么原因造成了这种尴尬的局面呢？答案就在于一个鲜为人知的概念——层叠上下文 。

层叠上下文揭秘

层叠上下文 是 CSS 中一个至关重要的概念，它作为判定元素叠放顺序的依据。可以将层叠上下文理解为一个隔离的区域，在这个区域内，元素的叠放顺序仅受该区域内其他元素的影响，不受其他层叠上下文内元素的干预。

创建层叠上下文

层叠上下文可以通过以下方式创建：

根元素 (html)
元素具有 position 属性且不为 static
元素具有 overflow 属性且不为 visible
元素具有 float 属性
元素具有 display 属性为 inline-block、table-cell、table-caption 或 flex

z-index 失效的真相

z-index 属性只能在同一层叠上下文 内生效。如果元素不处于同一层叠上下文中，那么 z-index 属性将无济于事。比如，如果元素 A 位于层叠上下文 1 中，而元素 B 位于层叠上下文 2 中，即使元素 A 的 z-index 值高于元素 B，元素 B 也会遮挡元素 A。

解决方案

当 z-index 失效时，我们可以采取以下方法解决：

将元素移动到同一层叠上下文中
将元素的父元素设置为具有 position 属性且不为 static
将元素的父元素设置为具有 overflow 属性且不为 visible
将元素的父元素设置为具有 float 属性
将元素的父元素设置为具有 display 属性为 inline-block、table-cell、table-caption 或 flex

层叠上下文的使用技巧

掌握了层叠上下文的概念和 z-index 失效的原因，我们便能灵活运用层叠上下文来实现千变万化的布局效果。

使用层叠上下文可创建模态窗口、弹出层等效果。
使用层叠上下文可实现元素的固定定位。
使用层叠上下文可实现元素的层叠效果。

结语

层叠上下文 是 CSS 中一项举足轻重的概念，它对元素叠放顺序的影响至关重大。透彻理解层叠上下文，我们便能游刃有余地控制元素的显示顺序，实现令人惊艳的布局效果。

常见问题解答

1. 什么是层叠上下文？

层叠上下文是 CSS 中一个隔离区域，在这个区域内，元素的叠放顺序仅受该区域内其他元素的影响。

2. 如何创建层叠上下文？

层叠上下文可以通过设置元素的 position、overflow、float 或 display 属性来创建。

3. 为什么 z-index 有时会失效？

z-index 属性只能在同一层叠上下文内生效。如果元素不处于同一层叠上下文中，则 z-index 属性将无效。

4. 如何解决 z-index 失效的问题？

将元素移动到同一层叠上下文中，或将元素的父元素设置为具有 position、overflow、float 或 display 属性，即可解决 z-index 失效的问题。

5. 层叠上下文有哪些实际应用场景？

层叠上下文可用于创建模态窗口、弹出层、固定定位元素和层叠效果等。

/* 创建层叠上下文 */
#modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

#modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 300px;
  background-color: white;
  z-index: 10000;
}