Задать вопрос
UNN4MED
@UNN4MED
Битрикс разработчик

Как скрыть панель за прозрачной шапкой?

На сайте фиксированная шапка, главная страница имеет слайдер на всё окно браузера.
По дизайну когда слайдер виден, шапке добавляется прозрачность.
В самой шапке есть кнопка, которая показывает панель, появляющаяся сверху вниз.
Когда слайдера нет, то панель выходит из под шапки нормально, но когда есть, то панель становится видно таким образом:
Шапка

64771d806e566829405783.png

Как-то можно это решить? Или убрать добавление прозрачности?
Код:
//ШАПКА
header {
    background-color: var(--color-red);
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    box-shadow: 0px 10px 50px 0px #00000040;
    transition: background-color .3s ease;
}
header.header_opacity{
    background-color: rgba(181, 131, 141, 0.8);
}
.header__container{
    background-color: var(--color-red);
}
//ПАНЕЛЬ
.sign-list__wrapper {
    position: relative;
}

.sign-list {
    display: flex;
    flex-direction: column;
    padding: 10px;
    width: 200px;
    gap: 10px;
    align-items: center;
    position: absolute;
    background-color: var(--color-gray);
    border-radius: 0 0 10px 10px;
    bottom: 0;
    z-index: -2;
    right: 0;
    visibility: hidden;
    transition: all .3s ease;
}

.sign-list.burger__list {
    left: unset;
    width: 200px;
}

.sign-list.burger__list.active {
    bottom: -240%;
    visibility: visible;
}

.sign-list .header__link {
    display: inline-flex;
}

.sign-list .header__link:after {
    bottom: 0;
}
  • Вопрос задан
  • 57 просмотров
Подписаться 1 Простой 3 комментария
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
ело в том, что её всё равно видно когда она вызывается, т.е вниз едет из предела окна и по шапке прозрачной идёт.


ну тогда такой вариант
Оборачиваем эту панельку в еще один блок. Этот блок будем позиционировать. Его высота должна быть равной высоте панельки. примерно так

64772f11cb56a955495944.png

Красный блок - overflow:hidden
Зеленый - это ваша панелька выезжающая. Из-за overflow обрезки у родителя она будет выезжать сверху как будто из под прозрачной шапки, но под самой шапкой ее не будет видно.

Чтобы красный блок не мешался - ему pointer-event:none; А чтобы при этом зеленый был кликабельным, ему – pointer-events: auto (или all)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
06 дек. 2024, в 03:58
10000 руб./за проект
06 дек. 2024, в 02:20
5000 руб./за проект
06 дек. 2024, в 01:36
700 руб./за проект