全宽谷歌地图和 CSS答案

【问题标题】：Full-Width Google Map And CSS全宽谷歌地图和 CSS
【发布时间】：2012-05-02 07:38:29
【问题描述】：

我在使用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&amp;ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=56.506174,79.013672&amp;t=m&amp;z=4&amp;output=embed"></iframe>

<div class="content"> I want this text to be in a div box that has a black background. <br /> </div>

风格：

.content {
     margin-top: -500px;
     width: 390px;
     background-color: black;
}

【问题讨论】：

这里是修复Set Google Maps Container DIV width and height 100%

标签： css maps

【解决方案1】：

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;
}

http://jsfiddle.net/oswaldoacauan/tx67C/

【讨论】：

是的，虽然负边距在语义上是正确的，但我也建议使用绝对定位。

【解决方案2】：

将此添加到您的 CSS 中。至少在 chrome 中工作

position:absolute;
z-index:9999;
color:#fff;

【讨论】：

【解决方案3】：

您要设置样式的 div 应该绝对定位并给出正的 z-index，以便它显示在地图上方而不是下方

【讨论】：

【解决方案4】：

如果可以的话，即使没有 css 的地图，我也使用了以下内容。

只需将 width="100%" 放在 iframe 中

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1994.873621232488!2d32.58519671879903!3d0.342002233462275!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x177dbbaed45800cb%3A0xfba72049a6cb630c!2sKamwokya%20Market%2C%20Kampala!5e0!3m2!1sen!2sug!4v1633372520333!5m2!1sen!2sug" width="100%" height="500" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

&lt;iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1994.873621232488!2d32.58519671879903!3d0.342002233462275!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x177dbbaed45800cb%3A0xfba72049a6cb630c!2sKamwokya%20Market%2C%20Kampala!5e0!3m2!1sen!2sug!4v1633372520333!5m2!1sen!2sug" width="100%" height="500" style="border:0;" allowfullscreen="" loading="lazy"&gt;&lt;/iframe&gt;

【讨论】：