CSS 不透明度仅适用于 0 或 1

Question

我在转换模态背景的不透明度时出现奇怪的行为。过渡从 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 时重叠。

Answer 1

你也需要给你的模态容器一个固定的位置

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

如果不是，它的位置默认是静态的，并且在它的子 <div class="modal"> 完全加载之前不关心 z-indexes。

位置 relative 或 absolute 也可以，但不是默认的 static。

CSS 不透明度仅适用于 0 或 1

CSS Opacity only works with 0 or 1

css

opacity

fixed