Html Div不是它下面的重叠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>

编辑：我已经在JSFIDLE中重新创建了html和css，它可以正常工作，但在我的网站中却不能？知道是什么引起的吗

div.thathastopopup {
    z-index:1;
}

---

简而言之，您可以使用

z-index

将位于

绝对

、

相对

或

固定

位置的元素相互放置。默认的

z-index

为

0

，堆叠顺序在直接父级中定义。

将CSS属性用于z-index。您可以将其视为z维度的顺序。因此，如果您将事物堆叠在彼此之上，z索引将定义哪个元素在哪个元素之上。数字越大，元素越高。因此，z-index为10将隐藏z-index为<10的任何内容。

不要忘记

z-index

仅适用于

位置

属性不等于

静态

的元素（即具有

位置：绝对

、

位置：相对

或（如果我没有弄错的话）

位置：固定

）).

在css中，它什么也没做。@colouslol所以用小提琴再现这个问题。@colouslol

z-index

无疑是解决方案。据我所知，您将它放在了错误的元素上（嵌套得太远）。如果你想让我看得更精确，给我一个。好的，在其他页面上它可以工作，但在这一页上它不行，它有一个图像滑块，我用它来保持重叠。你知道是什么引起的吗？图像滑块很可能有一个

z-index

本身，使其高于整个导航。要解决这个问题，请在图像滑块最近的直接同级上放置一个更高的

z-index

，很可能是

#主菜单

（它实际上应该是HTML5中的

元素）

div.thathastopopup {
    z-index:1;
}