使用谷歌地图作为背景？

Question

好的，所以我尝试将 Google 地图作为我网站的背景。但是当我尝试使用此代码在其上放置文本时：

.content{
z-index:0;
background-color:fffff;
position: absolute; top: 0; left: 0;
width: 900;
height: auto;
margin-right: auto;
margin-left: auto;
}

这给了我一个错误，它显示在地图顶部的地图，这是我想要的，但由于某种原因它不适用于边距。我所有的代码都在这里：http://pastebin.com/uz6wwtYZ

谁能帮助我，因为我希望网页中心的内容和地图作为背景。

谢谢。

Answer 1

当项目设置为绝对位置时，尝试调整顶部和左侧而不是边距：

.content{
z-index: 100;
background-color:fffff;
position: absolute; top: 100px; left: 100px;
width: 900;
height: auto;
margin-right: auto;
margin-left: auto;
}

希望有帮助吗？也可能想要设置更高的 z-index 值，就像我在上面所做的那样。

如果您希望它以自动边距值水平居中但又绝对定位，我认为您不能这样做。

你可以通过给你的内容一个绝对宽度并偏移左边的属性来尝试这个：

    .content{
width: 500px;
    z-index: 100;
    background-color:fffff;
    position: absolute; top: 100px; left: 50%;
    height: auto;
    margin: auto;
margin-left: -250px; /* half the value of the width */
    }

这是使用您的代码的 JS Fiddle 的链接：http://jsfiddle.net/4FLKt/1/ 似乎工作正常。

米奇。

Answer 2

您是否尝试将内容放在地图顶部？

#map {
    z-index:1;
}
.content{
    z-index:100;
}

Answer 3

这是因为您使用的是position: absolute;，而这与margin:auto; 不兼容。

在谷歌地图上放置一个全宽的 div 并将其设为绝对...然后在该 div 中您可以将另一个 div 居中。

示例

<div> //This div has position:absolute; and the width of the Google maps chart.
  <div> //This div has margin:0 auto;
     Content here
  </div>
</div>