Html 如何在另一个div前面获取div的子元素？

我试图在另一个div前面获取一个div的子元素，但z-index似乎只在div中起作用：

HTML:

---

我希望这些类按以下顺序出现：下、中、上。这里有一个jsFiddle来说明我的问题：

从

下面删除
位置：绝对


给一个元素一个绝对或相对的位置，以及一个z索引，会创建一个本地堆栈上下文。这意味着，对于任何绝对或相对定位的子级，其z索引都是相对于其父级（本地堆栈上下文），而不是相对于父级之外元素的z索引

如果
.below
需要绝对定位，则将
.below
和
.below
放在容器中，并给出容器的
位置：绝对
而不是
。below
只需计算此代码即可

html

还有别的办法吗？因为我想在滚动时将.below.position从绝对更改为固定，而不跳到前景。只要
.below
与
.middle
处于不同的本地堆叠上下文中，每个的z索引值都不会影响这两个值中的哪个显示在顶部。上面的问题不包括固定位置。您可能需要更新问题以提供其他信息和代码。
<div class="below">
  <div class="above">Oben!</div>
</div>

<div class="middle"></div>

.below{
  position:absolute;
  z-index:0;
}

.middle{
  position:absolute;
  z-index:1;
}

.above{
  position:absolute;
  z-index:2;
}

<div class="below">
 <div class="above">Oben!</div>
</div>
<div class="middle"></div>

.below{
 position:absolute;
 top:20px;
z-index:0;
 }
.middle{
position:absolute;
z-index:0;
}
.above{
 position:absolute;
z-index:-1;
}