HTML+；CSS:z索引定位

我的网页设计由三部分组成

• 红色部分是经典列表（菜单）
• 黄色部分是上一个红色列表（子菜单）中的另一个列表，并且
• 蓝色部分正常

我需要黄色的列表在顶部，蓝色在中间，红色在最后只有在HTML或CSS与z索引

HTML

.菜单{
位置：绝对位置；
背景色：红色；
z指数：-2；
}
.子菜单{
z指数：99999；
字号：x大号；
背景颜色：黄色；
}
奥巴先生{
位置：相对位置；
颜色：白色；
背景颜色：蓝色；
宽度：150px；
高度：50px；
z指数：-1；
}

菜单

子菜单



DIV

我认为您不能将div与“UL”列表一起使用。但是，您可以使用：before和：after CSS过滤器引用该部分。

那么是什么？移除位置：相对；任命似乎解决了这个问题

.menu {
    position: absolute;
    background-color: red;
    z-index: 8;
}

.menu .submenu {
    z-index: 10;
    font-size: x-large;
    background-color: yellow;
}

.obsah {
    color: white;
    background-color: blue;
    width: 150px;
    height: 50px;
    z-index: 9;
}

---

如果黄色和蓝色的位置是绝对的，这是可能的

.menu {
    position: absolute;
    background-color: red;
    width: 150px;
}

.submenu {
    position:absolute;
    z-index: 11;
    font-size: x-large;
    background-color: yellow;
}

.obsah {
    position:absolute;
    color: white;
    background-color: blue;
    width: 150px;
    height: 50px;
    z-index: 10;
}

---

你能列出你当前的html结构和样式吗？这里几乎少了一些东西，但蓝色部分必须是红色和黄色的中间部分（红色在底部，黄色在顶部）。

.menu {
    position: absolute;
    background-color: red;
    width: 150px;
}

.submenu {
    position:absolute;
    z-index: 11;
    font-size: x-large;
    background-color: yellow;
}

.obsah {
    position:absolute;
    color: white;
    background-color: blue;
    width: 150px;
    height: 50px;
    z-index: 10;
}