javascript - CSS 位置固定导致内容重叠

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 正确地指示固定位置元素已脱离流程。您必须在页面主体或主容器中添加边距，该边距等于导航元素的高度。你的 'z-index:10000;'将防止任何滚动元素覆盖你的导航，前提是没有任何东西被赋予更高的 z-index ;)