全宽谷歌地图和 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10250961/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full-Width Google Map And CSS
提问by Joshua Terrill
I have a full-width google map on a page using height="100%"and width="100%". I want to know put some css div stuff on topof it. I read that using negative values such as margin-top: -500px;will work, and they do, however when I try to assign a color to the background of the div, it doesn't display it over the map, it displays it under it, which isn't what I want at all. Is there a solution to this?
Code:
我在使用height="100%"和的页面上有一个全角谷歌地图width="100%"。我想知道在它上面放一些 css div 的东西。我读到使用负值，例如margin-top: -500px;可以工作，并且它们确实可以，但是当我尝试为 div 的背景分配颜色时，它不会在地图上显示它，而是在它下面显示它，这不是我想要什么。这个问题有方法解决吗？代码：
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&ie=UTF8&ll=37.0625,-95.677068&spn=56.506174,79.013672&t=m&z=4&output=embed"></iframe>
<div class="content"> I want this text to be in a div box that has a black background. <br /> </div>
Style:
风格：
.content {
margin-top: -500px;
width: 390px;
background-color: black;
}
回答by Oswaldo Acauan
html, body {
width: 100%;
height: 100%;
}
.map-frame {
width: 100%;
height: 100%;
position: relative;
}
.map-content {
z-index: 10;
position: absolute;
top: 50px;
left: 50px;
width: 390px;
background-color: black;
color: #FFF;
}
回答by daniel.auener
add this to your css. works in chrome at least
将此添加到您的 css 中。至少在 chrome 中工作
position:absolute;
z-index:9999;
color:#fff;
回答by Afzaal
the div you want to style should be positioned absolutely and given a positive z-index so that it shows above the map not below
您想要设置样式的 div 应该绝对定位并给出正的 z-index，以便它显示在地图上方而不是下方
