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; будет стоять железно?
Т.е. по ключевым медиазапросам не получиться прописывать его размер?
Есть какие-то особенности при написании адаптива для такого позиционирования?
Если да то желательно пример кода.
Спасибо.

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

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 хорошо, вроде разобрался, спасибо за ЛикБез)!

Написано более трёх лет назад

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

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

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

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

CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 8 часов назад
- 33 просмотра
1

ответ
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 11 часов назад
- 27 просмотров
0

ответов
HTML

Простой
Как на html реализовать блоки «Внимание / Важно»?
- 1 подписчик
- 11 часов назад
- 88 просмотров
0

ответов
HTML

+1 ещё

Простой
Как разместить елементы с разных блоков чтобы они перекрывали друг друга?
- 1 подписчик
- 14 часов назад
- 44 просмотра
1

ответ
CSS

Простой
Как сделать border со смещением?
- 1 подписчик
- вчера
- 94 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- вчера
- 74 просмотра
1

ответ
HTML

+1 ещё

Простой
Flex и position: sticky, почему не работает?
- 1 подписчик
- 19 нояб.
- 69 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как построить код, чтобы гугл таблица на сайте выдавала только значение из конкретной ячейки?
- 1 подписчик
- 19 нояб.
- 39 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Как выделить мышкой область на странице и присвоить класс элементам попавшим в эту область?
- 1 подписчик
- 19 нояб.
- 101 просмотр
1

ответ
JavaScript

+3 ещё

Средний
Как сделать слайдер на swiper, в котором активный слайд всегда крайний слева?
- 1 подписчик
- 19 нояб.
- 111 просмотров
1

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Тестирование модуля ElasticSearch через ftp

22 нояб. 2024, в 03:54

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

Телеграм бот

22 нояб. 2024, в 02:56

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

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

22 нояб. 2024, в 00:55

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

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

.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; На другом разрешении съезжает. Как пофиксить и есть ли особенности его вёрстки при адаптиве?

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

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

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