层叠上下文介绍

Question

层叠上下文是指一个 HTML 元素的渲染顺序和优先级。在 HTML 文档中，每个元素都有一个层叠上下文，它决定了元素在页面中的显示位置和与其他元素的关系。

层叠上下文的形成有多种方式，包括：

• 根元素
• position 属性为 absolute 或 fixed 的元素
• z-index 值不为 auto 的元素
• opacity 属性值小于 1 的元素
• transform 属性值不为 none 的元素
• mix-blend-mode 属性值不为 normal 的元素
• filter 属性值不为 none 的元素
• isolation 属性值为 isolate 的元素
• 在层叠上下文中，z-index 值越高的元素会覆盖在 z-index 值较低的元素之上。同时，同一层叠上下文内，后面出现的元素会覆盖在前面出现的元素之上。