CSS绝对位置，z索引

这一定很简单，但我被卡住了

我有一个标题，下面我有一个全高/全宽的块，绝对定位。这将是一张地图，但我刚刚使用了一个彩色块使它简单

在这个背景下，我需要中间有100%个高度的页面。我想我可以使用z-index在绝对定位的背景上显示这一点，但是页面总是在“bg”div后面

我知道我错过了一些简单的事情

*{
保证金：0；
填充：0；
}
html，正文{
身高：100%；
}
.标题{
背景：黑色；
高度：50px；
宽度：100%；
}
.bg{
背景：红色；
位置：绝对位置；
顶部：50px；
底部：0；
左：0；
右：0；
}
.第页{
背景：灰色；
身高：100%；
保证金：0自动；
宽度：500px；
z指数：10；
}

---

对静态定位元素（默认设置）没有影响。它影响相对、绝对和固定（“定位”）元素。一种常见的方法是将

位置：相对
添加到
。页面
对静态定位的元素没有影响（这是默认设置）。它影响相对、绝对和固定（“定位”）元素。一种常见的方法是将
位置：relative
添加到
.page
中，强制使用绝对位置元素进行索引，您可以使用负数


*{
保证金：0；
填充：0；
}
html，正文{
身高：100%；
}
.标题{
背景：黑色；
高度：50px；
宽度：100%；
}
.bg{
背景：红色；
位置：绝对位置；
顶部：50px；
底部：0；
左：0；
右：0；
z指数：-1；
}
.第页{
背景：灰色；
身高：100%；
保证金：0自动；
宽度：500px；
z指数：10；
}
要强制使用绝对定位元素进行索引，可以使用负数


*{
保证金：0；
填充：0；
}
html，正文{
身高：100%；
}
.标题{
背景：黑色；
高度：50px；
宽度：100%；
}
.bg{
背景：红色；
位置：绝对位置；
顶部：50px；
底部：0；
左：0；
右：0；
z指数：-1；
}
.第页{
背景：灰色；
身高：100%；
保证金：0自动；
宽度：500px；
z指数：10；
}

< /代码>主题，但是考虑使用<代码> >代码>和<代码> <代码>元素，而不是类的div：）关闭主题，但是考虑使用<代码> <代码>和<代码> <代码>元素，而不是类的div：）在您这样做之前添加一个原因，原因是Z-索引与其他定位元素的Z索引有关，正如我在回答中所解释的那样，
.page
没有定位，因此其z索引被忽略。好的，我将删除下一票，因为负z索引确实有效（相对于静态定位的元素总是在z索引零上），但这需要一些解释，从
.page
中删除误导性的z-index，只需在执行此操作之前添加一个原因，原因是z-index是相对于其他定位元素的z-index的，并且
.page
未定位，因此其z-index被忽略，正如我在回答中所解释的。好的，我将删除下一票，因为负z索引实际上是有效的（相对于静态定位的元素，它们总是在z索引零上），但这需要一些解释，并从
.page
中删除误导性的z索引