个人中心
gpt4 book ai didi

html - 分层对象 ||谷歌地图和导航栏

转载 作者：行者123 更新时间：2023-11-28 10:11:04 26 4
gpt4 key购买 nike

我正在尝试制作一个交互式谷歌地图页面，但我在对 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;
}

目前发生的是 map 占用整个页面(有意)，但我希望导航栏以某种方式 float 在顶部。任何帮助，将不胜感激。谢谢!

最佳答案

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

jsBin demo

那是为了回答您的最后一个问题(以某种方式在 map 顶部 float 导航栏)。

如果你想让所有东西都在 map 上......这样做:

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

同时将 #everythingElse 设置为 position: absolute;

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

关于html - 分层对象 ||谷歌地图和导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24377713/

26 4 0
文章推荐： javascript - 在 Chrome 中检测插件的版本号
文章推荐： html - 无法弄清楚如何使用 CSS 将导航栏中的多个链接居中
文章推荐： javascript - 移动设备上的 Mootool
文章推荐： javascript - CSS 重叠问题