isolation:isolate

虽然上面这些方法都可以创建层叠上下文，但有些方法却会影响到其子元素或者自身的样式。比如：

opactiy 会改为元素及其后代元素的透明度；
mix-blend-mode 会改变元素及其后代元素的 UI 效果；
filter 会改变元素及其后代元素的 UI 效果；
……
相比而言，我更喜欢 isolation:isolate; 。当使用这个属性时，它只做一件事情：创建一个层叠上下文 。反观其他创建方式，你会发它们都是通过一些其他修改来隐式创建的，而 isolation 则是显性创建：

不需要规定 z-index 的值；
可以作用到 static 元素；
不会影响到子元素。
比如下面这个示例，当你鼠标悬浮到卡片上时，它的层级会更高于相邻的卡片：

.drop:hover {
    isolation: isolate;
}