Прикрепить меню к верху (без прокрутки)

03 ноября 2021, 11:20

Меню выводится в середине страницы(так нужно для СЕО). Как его можно перенести стилями на самый верх, сдвинув остальные элементы? Разметка при этом не должна меняться с помощью js. При прокрутке прилипать оно так же не должно. Спасибо.

Answer 1

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

.menu{ 
  position: absolute; 
  top: 0; 
  left: 0; 
 } 
  
 .container{ 
  padding-top: высота меню 
 }

Или попробовать с помощью Flexbox. Общему родителю указать
display: flex; и flex-direction: column;(для вывода дочерних элементов контейнера друг под другом)

а самим дочерним элементам указать order: значение; с порядком расположения

.main { 
    display: flex; 
    flex-direction: column; 
} 
 
.main > .header {order: 2; } /* Отобразится вторым */ 
.main > .content {order: 3; } /* Отобразится третьим */ 
.main > .menu {order: 1; } /* Отобразится первым  */ 
.main > .footer {order: 4; } /* Отобразится четвертым  */

<div class="main"> 
    <div class="header">1</div> 
    <div class="content">2</div> 
    <div class="menu">3</div> 
    <div class="footer">4</div> 
</div>