Position: fixed; На другом разрешении съезжает. Как пофиксить и есть ли особенности его вёрстки при адаптиве?

Question

Kostiantyn Kondratiuk @Kinderman

Front-end Developer

HTML
CSS

Position: fixed; На другом разрешении съезжает. Как пофиксить и есть ли особенности его вёрстки при адаптиве?

При начале скролла, меню сайта анимировано появляется благодаря position: fixed; ну и JS.
На всех источниках в Гугле, которые я просмотрел, объясняют о position: fixed; без контейнера для контента.
Т.е. меню липнет к левому верхнему углу браузера и всё.

А надо, чтобы оно позиционировалось относительно container (т.е. так, как оно изначально прописано, без сдвигов влево-вправо и желательно чтобы фон меню был расстянут и на body, а сам контент меню начинался у левой границы контейнера - как на скрине).

На ноуте выставил nav с лишками нормально, по левой границе container (левый паддинг 72px), а открываю на ТВ - и нужен уже левый паддинг 157px.
Разрешения экранов: Ноут 1600*900, ТВ 1768*992.
Необходимый кусок кода залил на codepen:
https://codepen.io/Kostiantyn_Kondratiuk/pen/abJJKXV

Где-то торможу с позиционированием или с разрешением экранов...

И попутный вопрос - когда буду делать адаптив то nav с меню при position: fixed; будет стоять железно?
Т.е. по ключевым медиазапросам не получиться прописывать его размер?
Есть какие-то особенности при написании адаптива для такого позиционирования?
Если да то желательно пример кода.
Спасибо.

Вопрос задан более двух лет назад
348 просмотров

13 комментариев

Подписаться 1 Средний 13 комментариев

Антон Литвиненко @AntonLitvinenko

Фиксед всегда только относительно окна браузера

Написано более двух лет назад
secretsergey @secretsergey
Попробуйте так:

.fix { position: fixed; top: 0px; left: 0px; height: 80px; width: 100%; padding: 20px 0; animation: fixedMenu 1s forwards; -webkit-animation: fixedMenu 1s forwards; background-color: #ffffffeb; z-index: 1; justify-content: center; }

Но это не
надо, чтобы оно позиционировалось относительно container
.

А лучше фиксировать header, убрав из него .main .
Написано более двух лет назад
Ankhena @Ankhena Куратор тега CSS

Так не отступ нужно менять, а обернуть содержимое блоком с классом .container
И отделить меню от всего остального.
А у вас каша.

Написано более двух лет назад
Kostiantyn Kondratiuk @Kinderman Автор вопроса
Ankhena, Что это даст?
Вот такая вложенность для меню:

<body> <header class="header" id="header"> <div class="container"> <div class="nav-container"> <nav class="wrap d-flex align-items-center navfix"> <a href="#" class="logo"> <img src="img/logo.png" alt="Логотип" class="logo__img"> </a> <ul class="menu d-flex"> <li class="menu__item">

Т.е., по сути, есть 2 обёртки с класом контейнер. Как это повлияет на ситуацию? Контейнеру надо дать клас релейтив?
И что нужно отделить чтобы разложить кашу на её составляющие?)
Написано более двух лет назад
Ankhena @Ankhena Куратор тега CSS

Kostiantyn Kondratiuk,
Что это даст?

Это даст то, что вы просите в вопросе

https://jsfiddle.net/7x1s3jtd/
Для container у меня стоит 80% просто для наглядности, вы поставите свои значения и будете менять их при разных media.

Написано более двух лет назад
Kostiantyn Kondratiuk @Kinderman Автор вопроса

Ankhena, ок, спасибо. Но вы применили position: sticky; А надо position: fixed;
Если в вашем коде изменить на position: fixed; то header так же позиционируется по левому верхнему углу браузера и становиться инлайн.

Написано более двух лет назад
Ankhena @Ankhena Куратор тега CSS

Kostiantyn Kondratiuk,
Но вы применили position: sticky; А надо position: fixed;

Так задайте ширину 100%...

И fixed инлайном не может быть никогда ;)

Написано более двух лет назад
Kostiantyn Kondratiuk @Kinderman Автор вопроса

Ankhena, да, с шириной 100% работает.
Разве блочный элемент не занимает всю ширину браузера?) А при position: fixed; ширина элемента ограничивается по контенту в нём.

И ещё вопрос - не проще ли (да и кода меньше) прописать для nav justify-content: center; ну и padding: 20px 0; (как советует secretsergey выше в коментах)? Проверил - тоже рабочее решение. Как лучше с точки зрения человека с большим опытом чем у меня?

Написано более двух лет назад
Ankhena @Ankhena Куратор тега CSS

Kostiantyn Kondratiuk,
Как лучше с точки зрения человека с большим опытом чем у меня?

Я вроде написала как лучше, не?

Проверил - тоже рабочее решение.

Как оно может быть рабочим, если вы получаете блок с контентом по центру вместо того, чтобы получить его ограниченным по контейнеру, как вы писали в вопросе?

И не забывайте про проверку на переполнение. Меню может изменяться в любое время по прихоти владельца сайта.

Разве блочный элемент не занимает всю ширину браузера?)

В такой формулировке точно нет.
Вот простейший пример, опровергающий ваше определение https://jsfiddle.net/tyu8k64f/
А с fixed вам поможет разобраться инспектор кода в браузере. Посмотрите все свойства элемента на вкладке Computed с галкой Show All (я на примере хрома). Ради интереса можете попробовать задать блоку display:inline и тоже посмотреть, что будет на самом деле.

Написано более двух лет назад
Kostiantyn Kondratiuk @Kinderman Автор вопроса

Ankhena,

А надо, чтобы оно позиционировалось относительно container (т.е. так, как оно изначально прописано, без сдвигов влево-вправо и желательно чтобы фон меню был растянут и на body, а сам контент меню начинался у левой границы контейнера - как на скрине).

Вот цитата из моего вопроса. И на скрине видно, что фон на ширину боди, а контент ровняется по левой границе контейнера. Может я не так сформулировал вопрос - тогда, сорри.

И не забывайте про проверку на переполнение. Меню может изменяться в любое время по прихоти владельца сайта.

Ну, оно не будет меняться т.к. я себе делаю сайт). Но. Если уж делать то так, как надо).
Т.е. при добавлении контента в меню оно будет изменять отступы слева-справа, что есть не гуд. Правильно я понял?

В такой формулировке точно нет.

Ок. Такая формулировка должна быть (взял из MDN): "Исторически HTML-элементы было принято делить на блочные и строчные. Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок» (отсюда и название)"?

Вот простейший пример, опровергающий ваше определение https://jsfiddle.net/tyu8k64f/

Пример не понял т.к. там просто див в боди. И боди и див блочные.
Ладно. Суть вопроса была в позиционировании, всё-таки).

Написано более двух лет назад
Ankhena @Ankhena Куратор тега CSS

Kostiantyn Kondratiuk,
Вот цитата из моего вопроса. И на скрине видно, что фон на ширину боди, а контент ровняется по левой границе контейнера. Может я не так сформулировал вопрос - тогда, сорри.

Да, и код из моей песочницы именно так и делает.
В отличие от варианта с justify-content: center;, потому что он не ставит левый край содержимого nav по левому краю контейнера. А если и ставит, то это случайное совпадение на определенной ширине и определенном содержимом.

Т.е. при добавлении контента в меню оно будет изменять отступы слева-справа, что есть не гуд. Правильно я понял?

Да.
Только не отступы, а свободные промежутки.

Ок. Такая формулировка должна быть (взял из MDN): "Исторически HTML-элементы было принято делить на блочные и строчные. Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок» (отсюда и название)"?

На самом деле и это не вполне корректно.
И мой пример это и иллюстрирует.

Пример не понял т.к. там просто див в боди. И боди и див блочные.

Да, блочные и при этом div не занимает ширину body.
У body заданы паддинги и дочерний div не занимает ни всю ширину родителя ни, тем более, всю ширину окна браузера. А занимает всю доступную ширину.
Но fixed (как и absolute) выводит элемент из потока и там начинаются свои особенности и с расчетом координат и c размерами.

Написано более двух лет назад
secretsergey @secretsergey

Kostiantyn Kondratiuk, Вариант с justify-content - это "счастливое" стечение обстоятельств, т.к. все ваши блоки имеет фикс отступы. Если Вы поменяете контент в шапке, даже на 1 букву, то все поедет.
Полностью солидарен с Ankhena , как и писал в первом ответе, что надо разметку шапки менять.

Написано более двух лет назад
Kostiantyn Kondratiuk @Kinderman Автор вопроса

Ankhena, secretsergey хорошо, вроде разобрался, спасибо за ЛикБез)!

Написано более двух лет назад

Пригласить эксперта

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

PHP

+1 ещё

Средний
Интересует простой скрипт стены комментариев с возможностью добавить фото и мгновенным выводом на страницу?
- 1 подписчик
- 3 часа назад
- 25 просмотров
0

ответов
CSS

Простой
Почему line-clamp для обрезания строк отображает текст ниже троеточия?
- 1 подписчик
- 11 часов назад
- 34 просмотра
1

ответ
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- 11 часов назад
- 42 просмотра
2

ответа
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- вчера
- 45 просмотров
0

ответов
CSS

Простой
Не работает скролл на фоне блока. Как исправить?
- 1 подписчик
- вчера
- 37 просмотров
1

ответ
HTML

+1 ещё

Простой
Как поместить картинку рядом с текстом?
- 1 подписчик
- вчера
- 78 просмотров
2

ответа
CSS

Простой
Как выровнять по высоте заголовки в карточках товаров?
- 1 подписчик
- вчера
- 82 просмотра
3

ответа
HTML

+1 ещё

Средний
Как в файле svg заставить работать события?
- 3 подписчика
- вчера
- 695 просмотров
2

ответа
CSS

Средний
Почему у элемента такое поведение?
- 4 подписчика
- 23 апр.
- 2289 просмотров
0

ответов
CSS

Простой
Почему не работает transition свойство в scss файле через webpack?
- 1 подписчик
- 22 апр.
- 61 просмотр
2

ответа
Показать ещё Загружается…

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Ошибка в 1с при выгрузке товаров на сайт на Битриксе

25 апр. 2024, в 03:08

3000 руб./за проект

Создание и публикация короткого (reels) UGC-видео на YouTube-канале

25 апр. 2024, в 01:46

500 руб./за проект

Настроить перехват https-трафика для android-приложения

25 апр. 2024, в 01:02

10000 руб./за проект

Фиксед всегда только относительно окна браузера
Попробуйте так:

.fix { position: fixed; top: 0px; left: 0px; height: 80px; width: 100%; padding: 20px 0; animation: fixedMenu 1s forwards; -webkit-animation: fixedMenu 1s forwards; background-color: #ffffffeb; z-index: 1; justify-content: center; }

Но это не
надо, чтобы оно позиционировалось относительно container
.

А лучше фиксировать header, убрав из него .main .
Так не отступ нужно менять, а обернуть содержимое блоком с классом .container
И отделить меню от всего остального.
А у вас каша.
Ankhena, Что это даст?
Вот такая вложенность для меню:

<body> <header class="header" id="header"> <div class="container"> <div class="nav-container"> <nav class="wrap d-flex align-items-center navfix"> <a href="#" class="logo"> <img src="img/logo.png" alt="Логотип" class="logo__img"> </a> <ul class="menu d-flex"> <li class="menu__item">

Т.е., по сути, есть 2 обёртки с класом контейнер. Как это повлияет на ситуацию? Контейнеру надо дать клас релейтив?
И что нужно отделить чтобы разложить кашу на её составляющие?)
Kostiantyn Kondratiuk,
Что это даст?

Это даст то, что вы просите в вопросе

https://jsfiddle.net/7x1s3jtd/
Для container у меня стоит 80% просто для наглядности, вы поставите свои значения и будете менять их при разных media.
Ankhena, ок, спасибо. Но вы применили position: sticky; А надо position: fixed;
Если в вашем коде изменить на position: fixed; то header так же позиционируется по левому верхнему углу браузера и становиться инлайн.
Kostiantyn Kondratiuk,
Но вы применили position: sticky; А надо position: fixed;

Так задайте ширину 100%...

И fixed инлайном не может быть никогда ;)
Ankhena, да, с шириной 100% работает.
Разве блочный элемент не занимает всю ширину браузера?) А при position: fixed; ширина элемента ограничивается по контенту в нём.

И ещё вопрос - не проще ли (да и кода меньше) прописать для nav justify-content: center; ну и padding: 20px 0; (как советует secretsergey выше в коментах)? Проверил - тоже рабочее решение. Как лучше с точки зрения человека с большим опытом чем у меня?
Kostiantyn Kondratiuk,
Как лучше с точки зрения человека с большим опытом чем у меня?

Я вроде написала как лучше, не?

Проверил - тоже рабочее решение.

Как оно может быть рабочим, если вы получаете блок с контентом по центру вместо того, чтобы получить его ограниченным по контейнеру, как вы писали в вопросе?

И не забывайте про проверку на переполнение. Меню может изменяться в любое время по прихоти владельца сайта.

Разве блочный элемент не занимает всю ширину браузера?)

В такой формулировке точно нет.
Вот простейший пример, опровергающий ваше определение https://jsfiddle.net/tyu8k64f/
А с fixed вам поможет разобраться инспектор кода в браузере. Посмотрите все свойства элемента на вкладке Computed с галкой Show All (я на примере хрома). Ради интереса можете попробовать задать блоку display:inline и тоже посмотреть, что будет на самом деле.
Kostiantyn Kondratiuk, Вариант с justify-content - это "счастливое" стечение обстоятельств, т.к. все ваши блоки имеет фикс отступы. Если Вы поменяете контент в шапке, даже на 1 букву, то все поедет.
Полностью солидарен с Ankhena , как и писал в первом ответе, что надо разметку шапки менять.
Ankhena, secretsergey хорошо, вроде разобрался, спасибо за ЛикБез)!

Position: fixed; На другом разрешении съезжает. Как пофиксить и есть ли особенности его вёрстки при адаптиве?

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

Минуточку внимания

Войдите на сайт