菜單當更多的div

-2

我有一些奇怪的問題，我的網頁不是apearing ...菜單當更多的div

我做了一個簡單的網站，那裏有一個背景圖像，覆蓋了網頁，標題上用標誌和菜單圖標。 ..菜單圖標和菜單工作，直到現在...我做了兩個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>

來源

2015-10-05 David Stančík

您需要將相關代碼放在問題中（而不僅僅是指向您的網站的鏈接）。 Stack Overflow的部分目標是建立一個良好的問題和答案庫。一旦你修復了你的網站，那個鏈接將不再顯示問題，這個問題對未來的訪問者來說毫無價值。如果您無法提供[MCVE]（http://stackoverflow.com/help/mcve），您的問題可能會被關閉。 – Becuzz

菜單腳本工作正常。你必須設置爲。菜單類top屬性：

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

來源

2015-10-05 15:18:14 gmast

是的，這似乎工作 –

其中的一個補充，新的div現已覆蓋了菜單，但我寫這篇文章，你已經改變了標記，並不能與幫助回答。然而，這是一個典型的問題，當浮動或絕對定位的元素上升到掩蓋另一個元素的位置。

編輯：事實上，情況就是如此。標頭的position:fixed與絕對定位相同。然後你的菜單和標誌都浮動。這些都將這些項目從正常流程中拿出來，讓新的div可以覆蓋它們。

來源

2015-10-05 15:19:50 Rob

菜單當更多的div

回答

相關問題