Question

我已经制作了一个下拉菜单，但现在它落后于另一个div。我不知道这是怎么发生的，我以前从来没有过。请帮助我解决这个问题，并且下拉菜单不在某些文字后面。

＆＃13;

/* ------------- 
    Header     
------------- */

* {
    padding: 0px;
    margin: 0px;
    font-family: sans-serif;
}

body {
    margin: 0 auto auto;
    width: 100%;
    background: #DADADA;
    overflow-y: scroll;
}

#header {
    background: linear-gradient(#4CAE97, #378171);
    width: 100%;
    height: 60px;
    border-bottom: 1px solid black;
}

#header_text {
    background-color: transparent;
    font-size: 40px;
    color: #e89696;
    text-align: center;
    text-shadow: -2px 0 #6a7e89, 0 2px #6a7e89, 2px 0 #6a7e89, 0 -2px #6a7e89;
}

/* ------------- */
/* Navigation    */
/* ------------- */

#ul-nav {
    list-style-type: none;
    position: absolute;
    left: 50%;
    right: 50%;
    transform: translate(-50%, 0px); /*Zorgt er voor dat hij precies in het midden is*/
    width: 600px;
    height: 50px;
}

.nav-item {
    margin-left: 10px;
    margin-right: 10px;
    width: 170px;
    text-align: center;
    float: left;
    padding: 0px;
}

.nav-a {
    border: 1px solid black;
    border-top: 0px;
    border-radius: 0px 0px 10px 10px;
    color: black;
    background: linear-gradient(#FFADAD, #d38787);
    text-decoration: none;
    height: 100%;
    width: 100%;
    padding: 7px;
    display: block;
}

.nav-a:hover {
    background: linear-gradient(#d78e8e, #c67f7f);
    height: 100%;
    width: 100%;
    margin: 0px;
    display: block;
}

#nav-main:hover {
    border-radius: 10px 10px 10px 10px;
}

#nav-po:hover {
    border-radius: 10px 10px 10px 10px;
}

#nav-contact:hover {
    border-radius: 10px 10px 10px 10px;
    
}

/* ------------- */
/* Dropdown menu */
/* ------------- */

#nav-po-ul:hover ul {
    display: block;
}

#nav-po-ul ul {
    display: none;
    position: absolute;
    background: #d78e8e;
}

#nav-po-ul ul li {
    display: block;
    list-style-type: none;
    width: 170px;
}

#nav-po-ul ul li a:visited {
    color: black;
}

/* ------------- */
/*  Container    */
/* ------------- */

#container {
    /*Vorm*/
    height: 600px;
    width: 600px;
    margin: 50px auto 0px;
    /*Border*/
    border: 1px solid #000000;
    border-radius: 10px;
    /*Background*/
    background: #f9f9f9;
    /*Padding*/
    padding-left: 200px;
    padding-right: 50px;
    padding-top: 10px;
}

#container_header {
    position: absolute;
    width: 900px;
}

#container_header_text {
    width: 500px;
}

#container_header_hr {
    width: 500px;
    margin-left: -20px;
}

#container_text {
    margin-top: 50px;
    width: 450px;
}

/*Zet banaan op goede plek en formaat*/
#banaan {
    width: 200px;
    margin-left: 280px;
}

/*Laat de banaan draaien*/
#banaan:active {
    transform: rotate(-180deg);
}

＆＃13;

<!DOCTYPE html>


    <title>Informatica → Jonathan</title>
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
    <link rel="icon" href="img/favicon.ico" type="image/x-icon">
</head>
<body>
        <header id="header">
            <h1 id="header_text">Jonathan's website</h1>
        </header>
        <nav>
            <ul id="ul-nav">
                <li class="nav-item">
                    <a class="nav-a" id="nav-main" href="index.html">Home</a>
                </li>
                <li class="nav-item" id="nav-po-ul">
                    <a class="nav-a" id="nav-po" href="#">Opdrachten</a>
                    <!-- Dropdown menu -->
                    <ul>
                        <li>
                            <a href="#">Test</a>
                        </li>
                        <li>
                            <a href="#">Test</a>
                        </li>
                        <li>
                            <a href="#">Test</a>
                        </li>
                    </ul>
                </li>
                <!-- Eind dropdown menu -->

                </li>
                <!-- End test -->

                <li class="nav-item">
                    <a class="nav-a" id="nav-contact" href="contact.html">Contact</a>
                </li>

            </ul>
        </nav>

        <main>
            <div id="container">
                <header id="container_header">
                    <h1 id="container_header_text">Welkom op mijn Website!</h1>
                    <hr id="container_header_hr"/>
                </header>
                <div id="container_text">
                    <p class="text">Ga naar één van mijn po's of ga helemaal niks doen</p>
                    <p class="text">Als je kiest voor de optie niks doen heb ik nog een banaan hier onder voor je, ga daar maar mee spelen.</p>
                </div>
                <img id="banaan" src="img/banana.png" title=""/>
            </div>
        </main>

</body>

＆＃13;

Answer 1

这是因为您正在为容器使用绝对定位。

#container_header {
    position: absolute;
    width: 900px;
}

如果删除position: absolute，您会看到下拉列表按预期运行。

Answer 2

修改css adjust z索引和位置它会起作用。

#ul-nav {

  list-style-type: none;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.5);left: 50%;
  right: 50%;
  transform: translate(-50%, 0px); /*Zorgt er voor dat hij precies in het midden is*/

}

下拉菜单位于标签后面

2 个答案: