Question

我正在尝试制作一个交互式谷歌地图页面，但我在分层div时遇到了一些麻烦。

我的HTML看起来像这样

<body>
<div class="wrapper">
<div class="header">
    <p class="logo"> Put a logo here later </p>
</div>
    <div class="nav">
    <ul>
        <li> link 1 </li>
        <li> link 2 </li>
        <li> link 3 </li>
    </ul>
</div>
<div class="content">
    <div class="main">
        <h1>Google Maps</h1>
        <div id="map"></div>
    </div>
</div>
<div class="footer">
    <p> Put a footer down here later </p>
</div>
</div>

并且相关的css看起来像这样

#map{
position: absolute;
overflow: hidden;
left: 0px; top: 0px; 
height: 100%;
width: 100%;
z-index: 0;
}
.nav{
background-color: #fff;
width: 120px;
height: 500px;
z-index: 100;
}

此刻发生的事情是地图占据整个页面（有意）但我希望导航栏以某种方式漂浮在顶部。任何帮助，将不胜感激。谢谢！

Answer 1

只需将position:absolute;添加到.nav

即可

<强> jsBin demo

这是为了回答你的上一个问题（浮动导航栏以某种方式在地图上）。

如果你想让一切都在地图上......这样做：

<body>
  <div id="map"></div>
  <div id="everythingElse"><!--all other content--></div>
</body>

将 #ethingthingElse 设置为position: absolute;

示例：http://jsbin.com/xanen/3/edit

分层对象||谷歌地图＆amp;导航栏

1 个答案: