суперпозиция и центр div

Question

Я использую API Google Maps и пытаюсь установить сгенерированную карту в качестве фона.

Это мой 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) 
|  |       |  | 
|  |-------------------------|  | 
|-------------------------------------| 

Но результат не то же самое. Конечно, маржа, оставленная автоматически, не работает. Суперпозиция в порядке, правый край тоже, но как я могу сделать для левого края? Мой сайт должен быть всегда сосредоточен.

Спасибо.

Решение от Allan:

.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 в ширину (явно декларируется) вас позиционируют его на 450 пикселей слева от центра таким образом - центрируя весь элемент.

Имейте в виду, что это дает неожиданные результаты, когда браузер сжимается ниже 900px ширины - вам нужно поймать это с помощью медиа-запроса, если это необходимо.

Answer 2

Margin авто не будет работать, когда элемент дом имеет место как абсолютное.

Если у родителя есть определенное значение ширины, вы должны играть с верхним и левым атрибутами вашего элемента .element.

Другой способ - установить z-index карты в Zero (0) или отрицательное значение, тогда просто установите элемент. Position в положение relative, тогда маржа может использоваться с автоматическими значениями.

Дайте ему попробовать.

и если вам нужно, я мог бы создать jsfiddle для вас, но мне потребуется код карты, а