Question

我的网页有一些奇怪的问题。

我制作了一个简单的网站，其中有一个背景图片，覆盖网页，标题上有标题和菜单图标...菜单图标和菜单工作，直到现在...我做了两个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>

Answer 1

菜单脚本正常运行。您必须为.menu类设置top属性：

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

Answer 2

其中一个新增的div现在正在覆盖菜单，但是当我写这个时你已经改变了标记，并且无法解决问题。然而，当浮动或绝对定位的元素上升到覆盖另一个元素的位置时，这是一个典型的问题。

编辑：事实上，就是这样。标题的position:fixed与绝对定位相同。然后您的菜单和徽标都浮动。这些都将这些项目从正常流程中移除，这允许你的新div来掩盖它们。

更多div

2 个答案: