Чтобы зафиксировать меню вверху страницы, в CSS можно использовать свойство position: fixed;. Оно зафиксирует позицию элемента на экране, так что элемент будет оставаться на месте, даже если пользователь будет прокручивать страницу.
Например, следующий код зафиксирует меню навигации вверху страницы:
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
}В этом примере свойство position устанавливает тип позиционирования элемента в fixed. Свойство top: 0; устанавливает, что элемент должен располагаться вверху страницы, свойство left: 0; и right: 0; устанавливают ширину элемента в 100% от ширины экрана, чтобы он растягивался от края до края.
Если ваше меню имеет фиксированную высоту, вы можете установить отступ сверху равным высоте меню, чтобы предотвратить наложение других элементов на него при прокручивании страницы:
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px; /* пример: высота меню 50px */
padding-top: 50px; /* добавление отступа сверху*/
}Данный код устанавливает высоту меню в 50 пикселей, а свойство padding-top: 50px; добавляет отступ сверху равный высоте меню, чтобы контент не налагался на меню при прокручивании страницы.
Обращаем ваше внимание, что свойство position: fixed; удалит элемент из потока документа, что может привести к проблемам в оформлении страницы, поэтому не злоупотребляйте этим свойством, особенно если фиксированный элемент является крупным и находится в верхней части страницы.
