Question

我知道在这个问题上已经讨论了多个问题，我应对并粘贴了每一个建议/答案。他们都没有工作，请帮忙！请记住，我希望内容在滚动时不与菜单栏重叠。

我的问题

当我滚动中心div（表示“此网站专用于游戏”）与菜单栏重叠时。我该如何防止这种情况发生？

代码ID

黑色的中心div。 ID = “divCenter”。正在重叠的元素（“菜单栏”.id =“NavDivef”

代码，HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Home:</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="icon" href="http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/07/Video-Game-Wallpapers-and-Backgrounds-0.jpg">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <nav id="nav">
            <div id="maindic">
                <div id="NavDivef">
                    <ul>
                        <h1>CPG</h1>
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">Find out more</a></li>
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">Find out more</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <center>
           <div id="divCenter">
              <p>
                This website is dedicated to games.
              </p>
           </div>
        </center>
        <img alt="" id="gameImage"  src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/07/Video-Game-Wallpapers-and-Backgrounds-0.jpg"/>    
    </body>
</html>

代码，css

body{
   font-family: arial, sens-serif;
   background-size: cover;
}
*{
   padding: 0px;
   margin: 0px;  
}  
#NavDivef ul{
   width: 100%;
   height: 80px;
   background-color: black;
   line-height: 80px;
   position: fixed;
   line-height: 80px;
   opacity: 0.8;
} 
#NavDivef ul li{        
   list-style-type: none;
   display: inline-block;
   float: right; 
}
#NavDivef ul a{
   text-decoration: none;
   padding: 30px;
   color:White;     
}
#NavDivef ul li:hover{
   background: orangered;
   color: #cc0000;
}
#NavDivef h1{
   color:red;
   width: 300px;
   float: left;
   font-size: 480%;
   margin-left: 15px;
}
#divCenter{
   position: absolute;
   width: 50%;
   height: 54%; 
   background-color: black;
   margin-top: 280px;
   margin-left: 350px;
}
#divCenter p{
   color:red;
   margin-top: 30px;
   margin-left: 30px;
   font-size: 40px;
}     
#divExample{
   width: 600px;
   height: 700px
}

提前谢谢你。

Div重叠导航栏

0 个答案: