时间戳

首页 > 解决方案 > 位置：固定在导航栏上，但是当我单击打开导航按钮时，我的页脚堆叠在它上面

html - 位置：固定在导航栏上，但是当我单击打开导航按钮时，我的页脚堆叠在它上面

问题描述

我为导航创建了一个关闭和打开按钮。我的导航属性已固定位置。当我单击打开按钮时，导航会打开并按预期覆盖我的整个页面，除了我的页脚？在导航顶部，我的页脚仍然可见。我无法弄清楚可能是什么原因造成的。我已经包含了导航和页脚的代码。非常感谢您的建议！

    /* navigation */ 
    
    .header {
        position: absolute;
    }
    
    .header-content {
        display: flex;
        grid-column: 2 / -2;
        margin: 0;
    }
    
    .nav {
        position: fixed;
        background: #001E39;
        width: 100%;
        top:0;
        right:0;
        bottom:0;
        left:100%;
        transform: translateX(0);
    }
    
    .nav-list {
        list-style: none;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
        height: 100%;
    }
    
    .nav-link { 
        text-decoration: none;
        color: #fff;
        text-transform: uppercase;
    }
    
    /* --- nav-buttons --- */
    
    .navigation-open {
        transform: translateX(-100%);
    }
    
    .close-nav {
        border: 0;
        background: 0;
        color: #fff;
        font-weight: 600;
        font-size: 2rem;
        cursor: pointer;
        padding: .5em;
        position: absolute;
    }
    
    .open-nav {
        border: 0;
        font-size: 2rem;
        background: 0;
        color: #fff;
        cursor: pointer;
        padding: .5em;
        margin-left: auto;
        position: absolute;
        left: 420px;
        top: 8px;
    }
    /*================= */
    /*     FOOTER       */
    /*==================*/

    .footer {
        background: #0B2458;
        opacity: .8;
        color: #fff;
        padding: .5em;
    }

    .footer-text {
        grid-column: 2;
    }

标签： htmlcss

解决方案

页脚没有发布，我的错。这是代码。谢谢你。

/*================= */
/*     FOOTER       */
/*==================*/

.footer {
    background: #0B2458;
    opacity: .8;
    color: #fff;
    padding: .5em;
}

.footer-text {
    grid-column: 2;
}

推荐阅读