Question

如何避免地图越过导航栏。导航栏是固定的，我只想在向下滚动导航栏后面的地图。

如果有人能帮助我的话会很好谢谢

/**
*map == GoogleMap.div
*/
#map{
position: inherit;
width:500px;
height:500px;
background: transparent; 
left: 50%; 
margin-left: -250px;
}

ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}

ul.topnav li {float: left;}

ul.topnav li a {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida                      Grande''Lucida Sans', Arial, sans-serif;
display: block;
color: white;
text-align: center;
padding: 18px 20px;
text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #111;}

ul.topnav li a.active {background-color: #D2691E;}

Answer 1

如果没有看到您的HTML，很难分辨，但地图可能只是因为它在文档流程中较低而显示在导航栏之上，并且嵌入的地图元素获得绝对定位。我的导航栏上没有z-index，因此请尝试为其指定大于0的z-index。

除非您为导航栏指定了＆gt; 0 z-index，否则在文档流程中，具有这两个属性BOTH的元素将始终位于其上方：

相对，绝对或固定定位
编码在HTML

很多人选择z-index: 10;作为导航栏;它很容易记住，并且还有足够的空间来播放z-index以下。但任何高于零的东西都会奏效。

查看此codepen以获取示例，并对您粘贴的代码添加一些其他样式注释：http://codepen.io/roraback/pen/RpYQeR

通过Navbar映射

1 个答案: