Фиксированное позиционирование

305

14 февраля 2017, 19:49

Доброго времени! Есть элемент, спозиционированный фиксированно:

element{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Он изначально не присутствует на странице, а подгружается динамически (по клику) и помещается внутрь блока "parent". Среди его родителей есть один с относительным позиционированием:

<body>
  <div class="wrapper" style="position:relative">
    <div id="parent"></div>
  </div>
</body>

На элемент изначально навешен класс hidden (в таком виде он уже приходит).

.hidden {
  display: none;
}

После подгрузки элемент должен отобразиться на странице, занимая, соответственно всю область браузера. Его обрабатывает вот такой скрипт:

var w = $(element).innerWidth();
var h = $(element).height();
$(element).css({
    'top'     : '50%',
    'left' : '50%',
    'margin-top' : -(h/2),
    'margin-left': -(w/2)
});
$(element).removeClass('hidden').addClass('shown');

Класс shown только устанавливает display:block.

Проблема в том, что ширина и высота элемента почему-то отсчитываются не от области окна браузера (чего я, честно говоря, ожидала при фиксированном позиционировании, а от того самого элемента wrapper, у которого относительное позиционирование. Из-за этого в момент расчетов высота элемента равна высоте всего документа и соответственно, маргины рассчитываются неправильно, элемент оказывается слишком высоко. После того, как убирается класс hidden, высота становится равной высоте окна браузера, как и должно быть. Элемент исчезает за верхней границей экрана.

Почему фиксированно позиционированный элемент (даже невидимый, даже неподгруженный), рассчитывает свои размеры относительно другого элемента, а не относительно экрана? Или это нормальное поведение и мне нужно менять всю верстку?

Временный костыль, который позволяет правильно отображать элемент:

$('.wrapper').css('position','static');
var w = $(element).innerWidth();
var h = $(element).height();
$('.wrapper').css('position','relative');
$(element).css({
    'top'     : '50%',
    'left' : '50%',
    'margin-top' : -(h/2),
    'margin-left': -(w/2)
});
$(element).removeClass('hidden').addClass('shown');

АПД: Добавила элементу display: block, ничего не меняется. У body и html указана height:100%.

АПД: Видимо, проблема не в самом относительно позиционированном элементе, а в том, что если фиксированный блок имеет display: none, скрипт возвращает не его настоящую высоту, а высоту ближайшего позиционированного элемента. Можно ли как-то получить настоящую высоту скрытого фиксированного блока?

Answer 1

Получается так: