更多 div 时菜单不出现答案

【问题标题】：Menu not appearing when more divs更多 div 时菜单不出现
【发布时间】：2015-10-05 15:13:18
【问题描述】：

我的网页出现了一些奇怪的问题。

我制作了一个简单的网站，其中有一个背景图片，覆盖了网页，上面带有徽标和菜单图标的标题......菜单图标和菜单工作，直到现在......我做了两个 div，用height:100vh; 和他们是来自网页顶部的 100vh... 看起来很棒，但是菜单不起作用.. 怎么样，为什么？

为了更好地理解..这里是网站的链接：http://david.addagio.cz/own/

好的..所以有代码：

css:

html {
background: url(bistro2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

body {margin: 0;
padding: 0;
}

a{
text-decoration:none;
z-index:10;
}

#header {
background-color: none;
height: 110px;
width: 100%;
top:0px;
position: fixed;
}

h1 {
z-index:10;
color:white;
font-size: 35px;
padding: 0;
margin: 0;
font-family:Segoe UI Light;
padding-bottom:10px;
}

h2 {
color:white;
font-size: 22px;
padding: 0;
margin: 0;
font-family:Segoe UI Light;
line-height:50px;
z-index:10;
}





#head{
border-bottom:2px solid white;
margin-bottom:50px;
}



#menu{

margin-bottom:10px;
}

#social_icons{
    height:570px;
    background-color: rgba(0,0,0,0.1);
}

#main{
float: left;
}

#main img {
width:60px;
height:27px;
padding:45px;
}

#share{
float: right;
}

#share img {
padding:45px;
width:30px;
height:16px;
padding-top:50px;
}

.menu {
background-color: rgba(0,0,0,0.7);
top:0;
right: -400px;
height: 100%;
position: fixed;
width: 400px;
z-index:-10;
}

#third {
    background-color:#E8E8E8 ;
}



#second, #third {
    width:100%;
    height:100vh;
    padding:0px;
    margin:0;
    margin-left:auto;
    margin-right:auto;
} 

#second {
    background-color:#F0F0F0 ;
    margin-top:100vh;
}

html:

<!DOCTYPE html>
<html>
    <head>
        <title>UX design</title>
        <link href="styles_m.css" rel="stylesheet" type="text/css">
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
    </head


    <body>
    <div class="menu">
      <div id="wrapper">

        <div id="head">
        <h1>Menu</h1>
        </div>

        <div id="menu">
        <a href="#"><h2>O mě</h2></a>
        <a href="#"><h2>Proč si mě vybrat</h2></a>
        <a href="#"><h2>Portfolio</h2></a>
        <a href="#"><h2>Ukázky prací</h2></a>
        <a href="#"><h2>Objednávkový formulář</h2></a>
        </div>

        <div id="head">
        <h1>Sociální sítě</h1>
        </div>

        <div id="social_icons">

        </div>

      </div>
    </div>

        <div id="header">
        <div id="main">
            <a href="index.html"><img src="my_logo.png"></a>
        </div>
        <div id="share">
            <img name="menu" src="my_menu.png">
        </div>
        </div>
        <div class="wrapper">


            <div id="second">

            </div> 

            <div id="third">

            </div> 
        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type="text/javascript" src="main.js">

        </script>
    </body
</html>

【问题讨论】：

您需要将相关代码放入问题中（不仅仅是指向您网站的链接）。 Stack Overflow 的部分目标是拥有一个很好的问题和答案存储库。一旦您修复了您的网站，该链接将不再显示问题，并且此问题对于未来的访问者将毫无价值。如果您无法提供MCVE，您的问题可能会被关闭。

标签： javascript jquery html css menu

【解决方案1】：

菜单脚本工作正常。您必须为 .menu 类设置一个顶级属性：

.menu{
    ...
    top: 0;
    ...
}

【讨论】：

【解决方案2】：

其中一个已添加的新 div 现在覆盖了菜单，但您在我写这篇文章时更改了标记，无法提供答案。但是，当浮动或绝对定位的元素上升到覆盖另一个元素的位置时，这是一个典型的问题。

编辑：事实上，就是这样。标题的position:fixed 与绝对定位相同。然后您的菜单和徽标都会浮动。这些都使这些项目脱离了正常流程，从而使您的新 div 可以掩盖它们。

【讨论】：