层叠法则:
1.谁大谁上: 当具有明显的层叠水平标识的时候,如生效的 z-index 属性值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个。
2.后来居上: 当元素的层叠水平一致、层叠顺序相同的时候,在 DOM 流中处于后面的元素会覆盖前面的元素。
在本例中,z-index:auto 所在的<div>元素是一个普通定位元素,于是,里面的两个<img>元素的层叠比较就不受父级的影响,两者直接套用“层叠准则”。这里,两个<img>元素有着明显不一的 z-index 值,因此循“谁大谁上”的准则,于是, z-index 为 2 的那个“美女”就显示在 z-index 为 1 的“美景”上面了