Html 非绝对元素后面的绝对定位

我有一个元素，它包含两个子元素，其中一个子元素的位置是绝对的。我希望这个绝对定位的元素位于它的兄弟元素后面。似乎

z-index

没有太大影响。我如何做到这一点

---

jsiddle here:我希望绿色框在红色框后面。

放置位置：相对

#两个
div解决问题：

要使用z-index，必须将位置添加到元素中

来自Css技巧：

CSS中的z索引属性控制对象的垂直堆叠顺序
重叠的元素。在中，哪一个看起来像是物理上的
离你更近。z索引仅影响具有位置的元素
不是静态的值（默认值）

我没有意识到默认定位元素不能有z索引。谢谢你！
#two {
    position: relative;
}