0

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

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

2
  • .dock-panel { position: fixed; top: 88%; right: ; z-index: 100; width: 200px; margin: 30px auto; background-color: #9D9D9D; box-shadow: 0 5px 10px #ccc; border-radius: 30px; height: 50px; } 29 июл 2021 в 17:19
  • написал такой код, вот только проблемы с координацией. не могу сделать так чтоб она стояло именно по центру внизу 29 июл 2021 в 17:20

1 ответ 1

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

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

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.