今天完成的事情：今天复习了一下层叠上下文的层叠标准，其中发现了之前的误区：

两个元素重叠时，首先不是先确定他们共有的祖先级层叠上下文，而是先确定他们各自的（也就是不是共同的）父级是否有层叠上下文，如果有那么层叠顺序将有他们的父级决定：

如上可看出，当他们各自父级是z-index：auto，所以不是层叠上下文，当两张图片重叠时，图一是横图图二是竖图，只是比较他们两个的层叠水平，图二z-index：2比图一大，所以在上面。然后看下面：

上面这种情况就是开头说的当他们各自父级z-index：有了数值，成为了层叠上下文，当着两张图重叠，层叠顺序决定权就不在他们了，而是他们的父级，因为图一父级z-index:2比图二父级大，所以图一会在上面，而两张图的z-index则不起作用。

mix-blend-mode

首先，要知道”blend-mode”就是混合模式的意思。那mix, 恩，我也不知道为什么命名为mix, 可能是该属性不仅可以作用于HTML，还可以作用于SVG，干脆叫mix一起捋过来。该CSS属性作用是让元素内容和这个元素的背景以及下面的元素发生“混合”。

mix-blend-mode: normal;          //正常

mix-blend-mode: multiply;        //正片叠底

mix-blend-mode: screen;          //滤色

mix-blend-mode: overlay;         //叠加

mix-blend-mode: darken;          //变暗

mix-blend-mode: lighten;         //变亮

mix-blend-mode: color-dodge;     //颜色减淡

mix-blend-mode: color-burn;      //颜色加深

mix-blend-mode: hard-light;      //强光

mix-blend-mode: soft-light;      //柔光

mix-blend-mode: difference;      //差值

mix-blend-mode: exclusion;       //排除

mix-blend-mode: hue;             //色相

mix-blend-mode: saturation;      //饱和度

mix-blend-mode: color;           //颜色

mix-blend-mode: luminosity;      //亮度

mix-blend-mode: initial;         //初始

mix-blend-mode: inherit;         //继承

mix-blend-mode: unset;           //复原

这个属性他最大的问题就是会混合比他层级小的所有元素；这时就有了isolation:isolate；

他的意思是阻断，其原理就是生成了层叠上下文，从而阻断了该元素被混合。这也是层叠上下文的一个特性。

明天计划的事情：编写任务十三，学习js基础知识。
遇到的问题：太粗心，很多知识出现误区。
收获：重新认识了层叠上下文。