Html 嵌套的绝对元素必须位于底部元素的顶部

这是一个非常简单的问题代码

1） 是否有另一种方法使嵌套的'inner'div位于'bottom'div之上，唯一的方法是给'inner div一个z-index整数值

示例：它与

z-index:90一起工作但不
z索引：自动

我无法更改'outer'和'bottom'div的html/css

2） 这个问题是因为html的呈现顺序吗


.outer{
背景：红色；
宽度：200px；
高度：100px；
位置：相对位置；
z指数：自动；
}
.内部{
背景：黄色；
宽度：50px；
高度：50px；
位置：绝对位置；
左：0；
顶部：90px；
z指数：90；
/*z索引：自动；为什么它不工作*/
}
.底部{
背景：蓝色；
宽度：200px；
高度：100px；
位置：相对位置；
}

测试
使用
z-index:auto，则为元素提供父元素的z索引（如果父元素未设置值，则为0）。如果有一个元素在DOM中的第一个元素之后具有非静态位置（也具有z索引：0），则第二个元素优先于第一个元素。浏览器始终在顶部显示最后一个元素（如果它们具有相同的z索引）

您可以定义一个正的或负的z-索引来改变默认行为。
之所以发生这种情况，是因为
auto
为它提供了其父级的
z-索引。DOM中较低的元素放置在它们上面的元素上

该框不会建立新的本地堆叠上下文。当前堆叠上下文中生成的长方体的堆叠级别与其父长方体相同

例如：


div{
高度：100px；
位置：相对位置；
}
部门：之后{
位置：绝对位置；
内容：“测试”；
最高：100%；
}
.上{
背景：红色；
}
.下{
背景：蓝色；
}
将蓝色框置于
静态位置或设置
z-index:1
到
.outer
div。任何
.outer
内的内容都将引用
.outer
值

没有
z-index
的示例，让
position:relative
向上移动：
.outer{
背景：红色；
宽度：200px；
高度：100px；
位置：相对位置；
/*默认值，无需重写delthis>z-index:auto*/
}
.内部{
背景：黄色；
宽度：50px；
高度：50px；
位置：绝对位置；
左：0；
顶部：90px；
/*z指数：1；如果在同一区域的其他地方没有设置，则1就足够了*/
}
.底部{
背景：蓝色；
宽度：200px；
高度：100px；
/*位置：相对；放下它不需要z索引相对，绝对，固定在静态元素的顶部*/
}

测试