CSS: проблема позиционирования изображения

Question

У меня есть сайт drupal 7, для которого я добавляю изображение баннера в качестве поля типа контента. Но затем я использую CSS для позиционирования по абсолютному пути со следующими правилами CSS.

    .field-name-field-banner-image {
        position:absolute;
        top:123px;
        left:50%;
        margin-left:-490px;
    }

Работает нормально для обычного пользователя, но когда я вхожу в систему как администратор, позиция портится из-за наложения панели инструментов сверху. Что я делаю, чтобы это работало и для администратора. Вот эта страница http://azkaar.com/_mysites/muusa/

Answer 1

Самая большая проблема у вас в том, что вы указали position: absolute. Абсолютная позиция относится к первому родителю, который не является static (по умолчанию). Поэтому, если вы добавите position: relative к родителю, изображение будет соответствовать этому.

Поскольку ни у одного из родителей нет относительного свойства, изображение помещается относительно верхней части страницы. Когда вы входите в систему как администратор, добавляется оверлей, который должен сдвинуть все содержимое вниз, что приводит к искажению значения top: 123px. Попробуйте добавить

div#wrapper { position: relative; }
.field-name-field-banner-image { top: 113px; }

После этого вам нужно будет отрегулировать значение top абсолютно позиционированного div. Трудно дать точный ответ, так как я не могу войти в режиме администратора и посмотреть, что панель использует для своих CSS и HTML.

Answer 2

Хм ... пока я смотрю на этот css, вы создаете field-name-field-banner-image center.

 .field-name-field-banner-image {
    position:absolute;
    top:123px;
    left:50%;
    margin-left:-490px;
}

попробуйте указать конкретную ширину макета, чтобы это означало, если у вас есть

 margin-left:-490px;

так и должно быть

.field-name-field-banner-image {
    width:980px;
    position:absolute;
    z-index:200;
    top:123px;
    left:50%;
    margin-left:-490px;
}

Я добавил z-index, если у вас есть проблемы с перекрытием.

Но в drupal я думаю, что это проблема для администраторов. попробуйте связаться со службой поддержки drupal.