1

好的，所以我尝试将 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

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

谢谢。

4

3 回答 3

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 值，就像我在上面所做的那样。

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

您可以通过为您的内容提供绝对宽度并偏移 left 属性来尝试此操作：

    .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/似乎工作正常。

米奇。

于 2012-12-10T15:38:55.057 回答
0

这是因为您的 usingposition: absolute;和 that 不能与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>
于 2012-12-10T15:36:34.760 回答
0

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

#map {
    z-index:1;
}
.content{
    z-index:100;
}
于 2012-12-10T15:38:36.497 回答