CSS Opacity 仅适用于 0 或 1答案

【问题标题】：CSS Opacity only works with 0 or 1CSS Opacity 仅适用于 0 或 1
【发布时间】：2019-05-17 21:20:33
【问题描述】：

在转换模态背景的不透明度时，我有一个奇怪的行为。过渡从 0 开始，以 1 结束。我看到过渡在没有其他 HTML 元素的区域中起作用。它从 0 到 1 完全消失。

但我使用固定的页眉和页脚。从 0 过渡到 0.9999 时，页眉/页脚始终在模态框上完全可见。当 opacity 达到值 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 时重叠。

【问题讨论】：

如果没有有效的 sn-p 或页面链接，很难诊断。你能提供1个吗？
styledesign.de/example 通过单击页脚链接打开模式。
仔细区分模态和模态包装器。动画当然适用于包装器，但模式（覆盖整个屏幕）可能不行。
可能重复 stackoverflow.com/questions/2837057/… - 这与堆叠上下文有关 - 将不透明度更改为低于 1 将更改堆叠上下文并发挥 z-indexes 的作用，因此它与 z-index 有关太

标签： css opacity fixed

【解决方案1】：

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

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

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

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

【讨论】：

正如我所说，这不是因为 z-index。当不透明度最终达到 1 时，模态与所有内容重叠。但是，我尝试使用 positon: fixed 的方法，现在它不再重叠，即使达到 1 的不透明度也是如此。