了解z-index堆叠顺序

Question

我对使用z-index来决定堆栈顺序感到有些困惑。

我不太明白浏览器如何将position属性的元素与没有它的元素一起处理。

是否有一般规则来决定元素的堆栈顺序是否已明确定位元素？

赞赏不同情况的例子。一般来说：

1. 已设置位置且未设置位置的混合同级<div> s。
2. 嵌套<div>与兄弟<div>混合，位置设置且没有设置位置。