Question

由于某些未知原因，z-index似乎不起作用。我尝试制作子菜单。即第二个酒吧。重温它未能做到的#content ....

HTML

    <html>
    <head>
        <title>Мэрия Skrillax-RP</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="master.css" />
        <link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
        <link href='http://fonts.googleapis.com/css?family=Poiret+One&subset=cyrillic' rel='stylesheet' type='text/css'>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <script type="text/javascript" src="master.js"></script>
    </head>
    <body>
        <div id="wrapper">
            <div id="banner"><img src="http://i.imgur.com/f2EWgQP.png?1"><p id="banner text"></div>
            <ul id="navigation">
                <li><a href="#">Главная Страница</a></li>
                <li><a href="#">Задачи</a>
                    <ul class="submenu">
                        <li><a href="">Охрана</a></li>
                        <li><a href="">Министерство Обороны</a></li>
                        <li><a href="">Министерство Юстиций</a></li>
                        <li><a href="">Министерство Культуры</a></li>
                        <li><a href="">Министрество</a></li>
                    </ul>
                </li>
                <li><a href="#">Список Сотрудников</a>
                    <ul class="submenu">
                        <li><a href="">Hello</a></li>
                        <li><a href="">Hello2</a></li>
                    </ul>
                </li>
                <li><a href="#">Вакансии</a></li>
                <li><a href="#">Авторизация</a></li>
            </ul>
            <div id="content">
                <p>Hello! Welcome to the www.mayor.freeiz.com!<br><br> Currently I am working on adding different types of information</p>
            </div>
        </div>
            <div id="footer">Hello</div>
    </body>
</html>

CSS



    html {
        height:;
    }
    body {
        background-image: url("http://www.gtagaming.com/images/potd/200604/10501.jpg");
        background-attachment: fixed;
        background-size: 100% 100%;
        height:100%;
    }
    #wrapper {
        width:1024px;
        min-height: 100%;
        margin:0 auto;
    }
    #banner {
        height:216px;
    }
    #navigation {
        position:relative;
        list-style-type:none;
        font-size: 18px;
        background-color: orange;
        font-family: 'EB Garamond', serif;
        opacity:0.8;
        z-index: 15000001;

    }

    #navigation>li {
        float:left;

    }
    #navigation a {
        display:block;
        padding:10px 10px;
        color:white;
        font-weight: bold;
        width:183.81px;
        height:40px;
        text-align: center;
        background-color: blue;
        border-left:1px solid black;
        text-decoration:none;
    }
    #navigation a:hover {
        background-color:white;
        color:blue;
        border-top:3px solid red;
        opacity:0.9999;
        margin-bottom: -3px;
    }
    #banner h1 {
        font-size: 20px;
        text-align: center;
        position: relative;
        top: 1024px;
    }
    #content {
        position:relative;
        height:500px;
        background-color:white;
        opacity:0.9;
        clear: both;
        z-index:1;
    }

    #content p{
        position:relative;
        top:6px;
        font-size: 30px;
        z-index:1;
    }

    #footer {
        vertical-align: bottom;
        background-color: orange;
        width:1024px;
        height:50px;
        margin:0 auto;
    }

    .submenu {
        display:none;
        position:relative;

    }
    .submenu li {
        border-top: 2px solid black;
    }
    #navigation li:hover .submenu {
        display:block;
        z-index:99999999999999999999999999999999999999;
    }

Answer 1

而不是relative使用.submenu位置

中的absolute位置

CSS

.submenu {
    display:none;
    position:absolute;  
}

工作demo

Answer 2

相对定位不会使元素脱离正常的文档流。因此，当它出现时，它会像正常div一样占据空间，并将其下方的所有内容推下来。

要将其从普通文档流中删除，以便它只是位于所有内容之上，请使用position: absolute。在这种情况下，我们想要放在所有内容之上的是子菜单，因此将其应用于.submenu。

具有z-index的子菜单不希望查看内容

2 个答案: