Кто объяснит чудное поведение position:fixed в моем случае?

Question

[Илья Пестов]

Не думал, что спустя столько лет верстки буду задавать подобный вопрос, но не могу себе объяснить логику работы position:fixed. Я не применяю выравнивание с помощью top/right, top/bottom, margin и тд. Использую fixed как оно есть. При скроллинге больше 500 пикселей на страничке ipestov.com присваиваю фиксирование для баннера. Но при разных разрешениях 1280 и к примеру 1400 баннер фиксируется в разных местах. Проверил несколько раз media queries, родительские relative и тд...

Почему так происходит?

Answer 1

[Евгений Низамиев]

Я не применяю выравнивание с помощью top/right, top/bottom

а надо. Если присвоить top, то всё нормально становится.

А логика простая, начальные координаты position берутся относительно родителя, и по скольку aside на разном разрешении у тебя находится на разной высоте(из-за хэдера) по отношению к окну браузера/начала страницы, то position забирает эти координаты. Как-то так получается.

Comments

[Илья Пестов]

да именно так, походу переработал за ночь, что ничего дальше носа не вижу. Спасибо большое.

Answer 2

[Андрей Мохов]

У вас позиция (top или bottom) не установлена, следовательно при появлении свойства fixed положение на странице остается прежним, вот только отсчет ведется уже относительно окна браузера.
Без fixed (при узком браузере) расстояние до начала верстки 430 пикселей, после скролинга (при появлении fixed), top не устанавливается, следовательно 430 пикселей остается, но уже от окна браузера.

Comments

[Илья Пестов]

Спасибо

Answer 3

[ILoveYAnny]

Проблема может быть в других стилях этого элемента, или в неправильном подсчёте расстояний. Вы случайно отступы на JS задаёте ? Или наоборот попробуй задать их на JS, по формуле. Если мне не изменяет память родительский relative уместен, когда у дочернего элемента позишон absolute, когда же у элемента position fixed он выходит из общего стека. Поэтому проблема скорее всего в свойствах или в соседних элементах. Недавно сталкивался с интересной проблемой но вот беда, не как не могу вспомнить в чём была проблема.
Помоему в том, что элемент не правильно считал от края и нужно было вставить специальный разделительный элемент или тег. Я вставил это элемент и бразуер стал отлично считать. Мб в это задаче это и не применимо, так экспромт.
Попробуйте так же посмотреть в других браузарх, вдруг это особенность конкретного браузера.