CSS Opacity работает только с 0 или 1 - PullRequest
Новая
       24

CSS Opacity работает только с 0 или 1

1 голос
/ 17 мая 2019

У меня странное поведение при изменении непрозрачности модального фона. Переход начинается с 0 и заканчивается 1. Я вижу, что переход работает в области, где нет другого HTML-элемента. Идеально исчезает с 0 до 1.

Но я использую фиксированный колонтитул. При переходе от 0 до 0,9999 .. верхний / нижний колонтитул всегда полностью виден над модальным. Когда непрозрачность достигает значения 1, она, наконец, перекрывает верхний и нижний колонтитулы.

Сначала я подумал о z-index, но это не имеет смысла, потому что когда непрозрачность достигает 1, это перекрывает верхний и нижний колонтитулы. 

#header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 80px;
    background-color: #002d42;
}

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 56px;
    background-color: red; /** #004666 **/
}

Я ожидаю, что модальный фон также исчезает поверх фиксированного верхнего и нижнего колонтитулов и не только перекрывается, когда непрозрачность достигает значения 1.

1 Ответ

0 голосов
/ 17 мая 2019

Вы также должны задать фиксированную позицию для вашего модального контейнера 

#modal {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity 2s ease;
    position: fixed;
    z-index: 9999;
}

Если нет, то по умолчанию он статичен и не заботится о z-индексах, пока его дочерний элемент <div class="modal"> полностью загружен.

Положение relative или absolute также будет работать, но не по умолчанию static.

...