HTML + CSS: z-index 定位

Question

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

红色部分为<ul>和<li>，经典列表（菜单）。
黄色部分是之前红色列表（子菜单）中的另一个列表
蓝色部分正常<div>.

我只需要 HTML 或 CSS 中带有 z-index 的黄色列表在顶部，蓝色在中间，红色在最后。

HTML

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .menu {
                position: absolute;
                background-color: red;
                z-index: -2;
            }

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

            .obsah {
                position: relative;
                color: white;
                background-color: blue;
                width: 150px;
                height: 50px;
                z-index: -1;
            }
        </style>
    </head>
    <body>
        <ul class="menu">
            <li>MENU
                <ul class="submenu">
                    <li>SUBMENU</li>
                </ul>
            </li>
        </ul>
        <div class="obsah">
            DIV
        </div>
    </body>
</html>

Answer 1

我认为您不能在 "UL" 列表中使用 div。但是，您可以使用 :before 和 :after CSS 过滤器引用该部分。

Answer 2

那么like this？删除 position:relative；指定似乎可以解决问题。

.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;
}

Answer 3

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

.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;
}

demo

HTML + CSS: z-index 定位

HTML + CSS: z-index positioning

html

css

z-index