zjffun blog

CSS 层叠上下文(The stacking context)

更新于 写于 前端

  • 文档根元素<html>、拥有某些特殊样式(透明小于 1,transform不为none等)的元素会创建层叠上下文。
  • 未创建层叠上下文的元素会纳入上层的层叠上下文。

注意:

position: static: The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.

未设置 position(使用默认值 static)不会创建层叠上下文。如下面例子,DIV #3 还是会在 DIV #1 上面。

Root
- DIV #1(position: relative, z-index: 5)
- DIV #2(z-index: 4)
  - DIV #3(position: relative, z-index: 6)

参考:

The stacking context - CSS: Cascading Style Sheets | MDN