以下几种方式可以创建层叠上下文（包括但不限于哈）：
- 对有定位的元素（即postion不是默认的static）设置 z-index值
- 将 opacity 设置成比1小的值
- 将 position 设置成 fixed 或者 sticky （不需要再设置 z-index）
- 不使用 normal 而是使用 mix-blend-mode
- 在 display: flex 或者 display: grid 的容器元素内的子元素上使用 z-index，该子元素将会创建层叠上下文
- 使用 transform，filter，clip-path，或者 perspective
- 将 will-change 的值设置成 opacity 或者 transform
- 使用 isolation: isolate 显示地创建层叠上下文
在某个元素创建层叠上下文后，该元素以及它的子元素就都会处于这个层叠上下文里，在html网页视图里可见的堆叠顺序也会被限定在这一个位置，不会错乱到其它的层叠 上下文里。
简单说，假使A，B，C处于同一个层叠上下文，并且其 z-index 依次是1，2，3，那么就会出现C覆盖B，B覆盖A的情况。这时，如果A里也有一个创建了层叠上下文的元素D，且其 z-index 是10。按我们粗略的理解，D的 z-index 最大，就应该覆盖C出现在最前面。然而事实是不管D的 z-index 有多大，都不会出现覆盖C的情况，因为D所在的小世界A本身就比C要低，所以D无论怎么努力突破自己的极限也只能达到其所在小世界A的天花板，不可能影响到更高层世界C。
所以，这个事实是不是想告诉我们 环境比努力重要？或者 出身比努力重要？哈？