即使不出现堆叠上下文的顺序图
顺序图
- background
- border
- 块级
- 浮动
- 内联
- z-index: 0
- z-index: +
如果是兄弟元素重叠，那么后面的盖在前面的身上。
堆叠上下文出现情况（满足以下条件就是新的部门，新的堆叠上下文）
- 根元素 (HTML),
- z-index 值不为 "auto"的 绝对/相对定位，
- 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
- opacity 属性值小于 1 的元素（参考 the specification for opacity），
例子：
image.png
尽管b1的z-index比a1的要小但是，他的上一部门层级b比a的z-index要大，所以b里面所有的成员都比a要大。
http://js.jirengu.com/tukat/1/edit?html,css,output
负z-index
负z-index位置主要看他有没有出现新部门
负z-index
image.png
网友评论