CSS - 层叠上下文（The stacking context）
Posted jffun-blog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS - 层叠上下文（The stacking context）相关的知识，希望对你有一定的参考价值。
Root
- DIV #1(z-index: 5)
- DIV #2(z-index: 2)
- DIV #3(z-index: 4)
- DIV #4(z-index: 6)
- DIV #5(z-index: 1)
- DIV #6(z-index: 3)
- DIV #7(未设置 z-index， 且 opacity: 1)
- DIV #8(z-index: 6)上面结构中 DIV #4 的 z-index 比 DIV #1 的大，但因为 DIV #3 创建了层叠上下文，这个上下文的 z-index 比 DIV #1 小，所以渲染出的效果是 DIV #4 在 DIV #1 后面。
DIV #8 的 z-index 比 DIV #1 的大，并且 DIV #7 没有创建堆叠上下文，所以她渲染出的效果是 DIV #8 在 DIV #1 前面。
参考：
The stacking context - CSS: Cascading Style Sheets | MDN
以上是关于CSS - 层叠上下文（The stacking context）的主要内容，如果未能解决你的问题，请参考以下文章