老师应该把img放在box里面，所以box作为父元素，也是z-index为数值的定位元素，具备了层叠上下文，所以在这个box里面，img作为行内元素，优先级>父元素背景色

你这个代码写的是container、img都各自创建了一个层叠上下文，但是他们的父元素的层叠上下文都属于根标签，这样container和img都属于兄弟级别的元素，而container的z-index高于img，所以会覆盖img。老师讲的应该是img和父元素wrap之间的z-index设置。如果你将父元素的z-index设置为0，就会发现wrap被图片覆盖。因为此时img的层叠上下文不是根标签，而是wrap，wrap就变成了background，所以img的index：-1高于background，会覆盖...

后来居上原则好像要有定位吧，老师代码中没有定位呀。按照7阶层叠水平来看，block比inline、inline-block的层叠顺序低。

因为默认的z-index:auto并不会有层叠上下文，所以.box不设置z-index:0时，没有层叠上下文，是一个普通元素，而负值的z-index只会比有层叠上下文的background/border层级高，所以自然就没有.box层级高，所以被覆盖了；而当设置了.box z-index:0时，.box就有了层叠上下文，background也就是有层叠上下文的background，因此它的层级会比z-index:-1要低，所以被图片覆盖了。不知道这样你能不能懂。

sass好一些，sass规范比较好，后期维护比较容易。