Question

我有两个div，其中一个是导航菜单，另一个div在它下面，这些div互相接触。主菜单有一个子菜单，当你将鼠标悬停在它上面时，这是有效的，它不会移动任何div或任何东西，但它被隐藏但主菜单下的div如何修复它？的 HTML

<div id="mainmenu">
        <ul id="yw2">
            <li><a href="/Photoshop/index.php?r=home">Home</a></li>
            <li><a href="/Photoshop/index.php?r=site/page&amp;view=about">About us</a></li>
            <li><a href="#">Portofoloio</a>
                <ul>
                    <li><a href="#">Photography</a></li>
                    <li><a href="#">Videography</a></li>
                </ul>
            </li>
            <li><a href="/Photoshop/index.php?r=home/#">Wedding Services</a></li>
            <li><a href="/Photoshop/index.php?r=home/#">Wedding Packages</a></li>
            <li><a href="/Photoshop/index.php?r=home/#">Destination Weddings</a></li>
            <li><a href="/Photoshop/index.php?r=home/#">Contact us</a></li>
        </ul>   </div><!-- mainmenu -->
    <!-- breadcrumbs -->

    <div class="span-19">
        <div id="content">




            <link rel="stylesheet" type="text/css" href="/Photoshop/css/rslides.css" />
            <script src="/Photoshop/scripts/responsiveslides.min.js"></script>

            <script>
                $(function() {
                    $(".rslides").responsiveSlides({
                        speed: 1000,
                        timeout: 3000,
                        pager: true,
                        pause: true
                    });
                });
            </script>
            <ul class="rslides">
                <li>
                    <img class="carousel-item" src="images/upload/index/12769252" alt="Scrolling Image" />          </li>
                <li>
                    <img class="carousel-item" src="images/upload/index/1374403352" alt="Scrolling Image" />            </li>
                <li>
                    <img class="carousel-item" src="images/upload/index/170297090" alt="Scrolling Image" />         </li>
                <li>
                    <img class="carousel-item" src="images/upload/index/62949888" alt="Scrolling Image" />          </li>
            </ul>

CSS

/*mainmenu*/
#mainmenu
{
    text-align: center;
    border-top: 2px solid #addccf;
    border-bottom: 2px solid #addccf;
}

#mainmenu ul
{
    padding:8px 20px 8px 20px;
    margin:0px;
}
/*the primary menu*/
#mainmenu ul li
{
    position: relative;
    display: inline;
}
/*The text of the menu*/
#mainmenu ul li a,
#mainmenu ul li ul li a
{
    color: #454545;
    font-size:14px;
    font-weight:bold;
    text-decoration:none;
    padding:5px 8px;
}
/*When you hover over*/
#mainmenu ul li a:hover,
#mainmenu ul li.active a
{
    color: #b6e37c;
    text-decoration:none;
}
/*Submenu Css*/
#mainmenu ul li ul{
    display: none;
    position: absolute;
    text-align: center;
    padding:8px 20px 8px 20px;
    border: 2px solid #addccf;
    left: -40px;
    width: 150px;
    margin-top: 15%;
    top: 100%;
    z-index: 1;
}
#mainmenu ul li ul li a{
    display: block;
}
/*Whe users hovers it will show the submenu*/
#mainmenu ul li:hover > ul{
    display: block;
}
/*end of mainmenu*/
.span-19{
    margin-top: 30px;
    text-align: center;
    width: 100%;
}

编辑：我已经在jsfiddle中重新创建了html和css，它可以按计划运行，但在我的网站上它并没有？什么可能导致它？

Answer 1

div.thathastopopup {
    z-index:1;
}

Documentation on z-index on MDN here

简而言之，您可以使用z-index将位于absolute，relative或fixed的元素放在彼此之上。默认z-index为0，堆叠顺序在直接父级中定义。

Answer 2

对z-index使用CSS属性。您可以将其视为z维度的订单。因此，如果您将事物堆叠在一起，则z-index定义哪个元素位于哪个元素之上。数字越大，元素越高。因此，z-index为10将隐藏任何z-index为＆lt; 10。

Answer 3

不要忘记z-index仅适用于position属性不等于static的元素（即带有position: absolute的元素，{{1或者（如果我没有弄错的话）position: relative））。

Div不低于它的重叠div

3 个答案: