Explain
返回文章目录

CSS 层叠上下文并不是 z-index 比大小

当 z-index 看起来失效时，真正参与比较的往往不是两个元素，而是它们各自所在的层叠上下文。

先比较父级，再比较子级

一个子元素的 z-index: 9999 不能穿过父元素所在的层叠上下文。浏览器会先决定两个父级上下文的顺序，再在每个上下文内部排序。

css
.sidebar {
  position: relative;
  z-index: 2;
}

.content {
  position: relative;
  z-index: 1;
}

即使 .content 中的浮层设置得再大，它仍然整体位于 .sidebar 之后。

登录后阅读完整文章

登录后可继续阅读全部内容，并访问文章对应的课后习题。

登录继续阅读