Центрирование div на верхней части изображения

Question

По какой-то причине я не могу заставить это работать: Сайт

(Красные и зеленые поля будут удалены, когда они будут правильно расположены.)

Спасибо за помощь.

Answer 1

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

http://www.w3schools.com/tags/tag_map.asp

Это позволяет вам установить определенные области изображения в качестве ссылки.

Answer 2

Общая концепция центрирования чего-либо в css довольно проста. Сначала вам нужен контейнер с относительным расположением. Дочерний элемент, подлежащий центрированию, должен иметь фиксированную ширину и высоту и должен располагаться в абсолютном положении на 50% сверху и на 50% слева, а верхнее и левое поля должны быть отрицательной половиной ширины и высоты соответственно. Другими словами:

<div id="container">
    <img src="" alt=""/>
    <div class="box"></div>
</div>

.

#container { position: relative; }
img { dispaly: block; } /* It fills the container */
#box {
    position: absolute;
    width: 300px; /* Fixed */
    height 150px; /* Fixed */
    top: 50%;
    left: 50%;
    margin-top: -75px; /* 300/2 */
    margin-left: -150px; /* 150/2 */
}

Answer 3

Попробуйте установить следующие свойства вместе с положением

верх: 0; Слева направо: 0;

Вы также можете установить свойство top или left, чтобы сделать поля видимыми в центре

и если вы хотите, чтобы ваши ящики оставались внутри центрального div, то сделайте div с id выплеском в положение: относительный

поможет в решении вашей проблемы