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

Question

[TtT RrR]

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

Шапка

Как-то можно это решить? Или убрать добавление прозрачности?
Код:

//ШАПКА
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;
}

Comments

[Сергей delphinpro]

нужно просто поднять эту панельку повыше (на высоту шапки), чтобы она ушла за пределы экрана.

[Сергей delphinpro]

Можно, например убрать из стилей bottom и заюзать трансформ

.selector {
  transform: translateY(calc(-100% - 2rem)); /* 2rem - высота шапки */
}
.selector.active {
  transform: translateY(0);
}

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

[TtT RrR]

Сергей delphinpro, дело в том, что её всё равно видно когда она вызывается, т.е вниз едет из предела окна и по шапке прозрачной идёт.

На картинке фрагмент из анимации, в целом у неё visibility hidden

Answer 1

[Сергей delphinpro]

ело в том, что её всё равно видно когда она вызывается, т.е вниз едет из предела окна и по шапке прозрачной идёт.

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



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

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