Question

我正在创建一个静态网站，我修改了顶部的导航菜单作为固定的标题部分。

问题在于，我在其旁边添加的任何内容都在菜单顶部重叠。

向内容添加相对位置的行为方式相同。

将位置设置为绝对显然是唯一可行的但是我将不得不添加大量的边距，这将使网站太不稳定。

这是我菜单的CSS，由于这个问题我在主CSS中没有任何东西。

nav {
    position: fixed;
    top: 0;
    background:none;
    z-index:10000;
    width:100%;
    font-size:34px;
    transition: all 0.5s;
}

nav.navScroll {
    background: #013D5F;
    font-size:20px;
    transition: all 0.5s;
    color: #fff;
}

img.logo {
    float:left;
    display:none;
    transition: all 0.5s;
}

img.logoScroll {
    display:inline;
    width:50px;
    padding:5px;
    transition:all 0.5s;
}

div.menu {
    text-align:center;
}

div.menuScroll {
    float:right;
}

ul {
    padding-left:0;
    margin-left:0;
}

li.nav {
    display:inline;
    text-decoration:none;
    padding-left:15px;
}

    li.nav a {
        list-style-type: none;
        text-decoration:none;
        color: white;
        font-weight:400;
    }

    li.nav a:hover {
        color: #FFD634;
        transition: 1.2s;
    }

.navScroll li.nav a {
    color:#fff;
}

.navScroll li.nav a.selected {
    color: #FFD634;
}

Answer 1

Jaromanda X正确地指示固定位置元素被取消流动。您必须向页面正文或主容器添加一个边距，该边距等于nav元素的高度。你的'z-index：10000;'将阻止任何滚动元素覆盖您的导航，只要没有给出更高的z-index;）

CSS位置已修复导致内容重叠

1 个答案: