док-панель для веб-приложения

док-панель Yandex Q

здравствуйте, новичок пока в разработке веб-приложении. Хотелось бы узнать как сделать такую панельку, только чтоб она не пропадала с виду.


Ответы (1 шт):

Автор решения: Alexey Vladimirov
  1. Можно создать область, постоянно висящую на экране при помощи свойства position:fixed, закрепив ее в самом верху (top:0) или в низу экрана (bottom:0) и растянув на всю ширину: width:100%.

  2. Для удобства центрирования содержимого можно использовать display:flex в сочетании с justify-content:center;

  3. Внутри фиксированной области можно поместить собственно функциональную панель с кнопками, внешними отступами, тенью. Она может как угодно менять ширину, в зависимости от набора кнопок, но всегда останется посередине экрана.

  4. Чтобы прозрачная фиксированная область пропускала сквозь себя клики по ссылкам на странице, пригодится свойство pointer-events:none; Панелька с кнопками унаследует это свойство, ей оно не нужно, т.к. она должна "ловить" клики: pointer-events:auto.

→ Ссылка