Question

我正在使用谷歌地图API并尝试将生成的地图设置为背景。

这是我的HTML

<div class="content">
  <div class="map"></div>
  <div class="element"></div>
</div>

CSS

.content {
  position: relative;
  height: 500px;
}

.map {
  position: absolute;
  width: 100%;
  height: 100%;
}

.element {
  position: absolute;
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

该网站应该是这样的

|-------------------------------------|
|                                     |
|                                     |
|                                     | <- Other content
|                                     |
|-------------------------------------|
|.map |-------------------------|     |
|     |.element                 |     | <- The concerned content (.content)
|     |                         |     |
|     |-------------------------|     |
|-------------------------------------|

但结果并不相同。剩余边距自动当然不起作用。叠加是好的，也是正确的边距，但我怎么能做左边距？我的网站必须始终居中。

谢谢。

艾伦的解决方案：

.content {
  position: relative;
  height: 500px;
}

.map {
  position: absolute;
  width: 100%;
  height: 100%;

  z-index: 0;
}

.element {
  position: relative;

  width: 900px;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

Answer 1

使用：

.element {
  left:50%;
  margin-left:-450px;
  position:absolute;
  z-index:1;
}

由于元素宽度为900px（显式声明），因此您将这个位置放置在中心左侧450px处 - 以整个元素为中心。

请记住，当浏览器缩小到900px宽度以下时，这会产生一些意想不到的结果 - 如果相关，您需要使用媒体查询来捕获它。

Answer 2

当dom元素具有绝对位置时，Margin auto不会工作。

如果父级具有特定的宽度值，则应使用您的.element项目的top和left属性进行播放。

另一种方法是将地图的z-index设置为零（0）或负值，然后，只需将.element设置为相对位置，然后可以将余量用于自动值。

试一试。

如果你需要，我可以为你创建一个jsfiddle，但我也需要你的地图代码

div叠加和中心

2 个答案: