时间戳

首页 > 解决方案 > 网站页脚不会被模态弹出表单覆盖

html - 网站页脚不会被模态弹出表单覆盖

问题描述

我的网站有一个模态弹出表单，其背景应该覆盖整个视口。该网站包含页眉和页脚，模式由简单的 javascript 触发。一切正常，除了我的页脚仍然显示在顶部并且没有覆盖模式背景。

这是我的CSS代码：

#footer {
    position:fixed;
    width: 100%;
    z-index: 2;
    bottom: 0;
    padding: 8px;
    background-color: #688596;
    color: white;
    box-shadow: 0px 2px 8px #676767;
}

.modalBackground {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(180, 180, 180, 0.6);
}

javascript 将 display:none 设置为 display:block 用于 .modalBackground。正如我所说，一切正常，但页脚仍然位于顶部。我在这里想念什么？提前致谢！

标签： htmlcss

解决方案

这是因为z-indexof footer大于z-index你的modal。

具有较大堆栈顺序的元素始终位于具有较低堆栈顺序的元素之前。

阅读更多关于z-index 这里。试试这个（我刚换了z-indexes）：

#footer {
    position:fixed;
    width: 100%;
    z-index: 1;
    bottom: 0;
    padding: 8px;
    background-color: #688596;
    color: white;
    box-shadow: 0px 2px 8px #676767;
}

.modalBackground {
    display: none;
    position: fixed;
    z-index: 2;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(180, 180, 180, 0.6);
}

推荐阅读