@nickensoul

Абсолютно спозиционированный элемент выравнивается относительно вьюпорта.. Почему?

Вопрос такой.
Имеется структура:
<a href="#" class="banner">
<div class="btn"></div>
</a>

.banner {
    display: block;
    height: 100%;
    background: transparent url("moscow.jpg") no-repeat scroll 50% top;
    filter: none;
    margin-left: 0px;
    margin-top: 0px;
    opacity: 0.995705;
    width: 100%;
    visibility: visible;
    position: absolute;
    transform-origin: 50% 50% 0px;
    transform: translate3d(0px, 0px, 0px);
}
.btn {
    width: 232px;
    height: 39px;
    bottom: 87px;
    left: 539px;
    position: absolute;
    z-index: 200;
    background: transparent;
}

При этом родительский элемент .banner шире вьюпорта и выравнивается по горизонтали по центру. То есть, левый край блока выходи за пределы окна браузера.
Если я, уменьшая масштаб страницы, вмещаю блок во вьюпорт, то позиционирование происходит относительно .banner - как надо.
НО если .banner не влазит, то .btn позиционируется слева относительно вьюпорта - словно position: fixed;
Подскажите. Либо я туплю, либо.. в чем дело?
  • Вопрос задан
  • 930 просмотров
Решения вопроса 1
@nickensoul Автор вопроса
Нашел причину.
Ширина родительского блока высчитывается динамически средствами js и равна текущей ширине вьюпорта (при этом максимальная ширина = 1900).
высчитывается не при ресайзе, а при ренджеринге родительского блока. (слайд-галерея)
таким образом, родитель элемента .banner НЕ шире вьюпорта, он встраивается в ширину окна.
фоновое изображение при этом отображается в 100% масштабе и его ширина опять же 1900.
все-таки я затупил.)
спасибо за ответы.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
А родитель .banner'a имеет position:relative? если нет, то тогда как ему иначе позиционироваться
Ответ написан
Ivanq
@Ivanq
Знаю php, js, html, css
Установи у .banner position: relative
htmlbook.ru/css/position
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы