здравствуйте, новичок пока в разработке веб-приложении. Хотелось бы узнать как сделать такую панельку, только чтоб она не пропадала с виду.
-
.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; }– dark_ess3nce29 июл 2021 в 17:19
-
написал такой код, вот только проблемы с координацией. не могу сделать так чтоб она стояло именно по центру внизу– dark_ess3nce29 июл 2021 в 17:20
1 ответ
Можно создать область, постоянно висящую на экране при помощи свойства
position:fixed
, закрепив ее в самом верху (top:0
) или в низу экрана (bottom:0
) и растянув на всю ширину:width:100%
.Для удобства центрирования содержимого можно использовать
display:flex
в сочетании сjustify-content:center
;Внутри фиксированной области можно поместить собственно функциональную панель с кнопками, внешними отступами, тенью. Она может как угодно менять ширину, в зависимости от набора кнопок, но всегда останется посередине экрана.
Чтобы прозрачная фиксированная область пропускала сквозь себя клики по ссылкам на странице, пригодится свойство
pointer-events:none
; Панелька с кнопками унаследует это свойство, ей оно не нужно, т.к. она должна "ловить" клики:pointer-events:auto
.