CSS | Разборы, фишки, лайфхаки

Сверстал блок, добавил width: 100%, сделал внутренние отступы и рамку. Всё логично: блок должен занимать всю доступную ширину. Но внизу страницы появилась горизонтальная прокрутка. На телефоне сайт теперь можно двигать вправо, словно там спрятан дополнительный контент. Знакомая ситуация? Часто причина не в браузере и не в процентах. Просто ширина содержимого и полная ширина элемента могут отличаться. Разберём на примере. У блока есть содержимое, внутренние отступы padding и рамка border. Снаружи могут находиться внешние отступы margin...

Написал position: sticky, прокрутил страницу, а меню спокойно уехало вверх. Добавил z-index: 999. Не помогло. Добавил !important. Теперь не работает особенно уверенно. Дело в том, что sticky зависит не только от самого элемента, но и от окружающей разметки. Разберём основные причины на небольших примерах. Обычно элемент с position: sticky занимает место в документе и прокручивается вместе с ним. Когда он достигает заданной границы, начинает удерживаться возле неё, пока позволяют границы его контейнера...

Нажимаешь в меню «Контакты». Страница прокручивается, адрес меняется, переход вроде бы сработал. Только самого заголовка не видно: он спрятался под закреплённой шапкой. Прекрасно. Навигация доставила пользователя куда нужно, но решила не показывать куда именно. Хорошая новость: для такого случая обычно не нужны вычисления координат и обработчики кликов на JavaScript. В CSS уже есть подходящие свойства. Якорная ссылка указывает на элемент с определённым id: После нажатия браузер прокручивает страницу к заголовку...