html - CSS 固定顶部菜单导航在某些项目下

Question

我在我的网站上遇到了一个问题：我试图修复上面的菜单，现在当我滚动浏览网站时，所有的标题和段落都在菜单上：

这是问题的图片

这是固定顶部菜单的 HTML

<div class="topnav" id="myTopnav">
        <a href="#" class="active">Home</a>
        <a href="#">About</a>
        <a href="#">Menu1</a>
        <a href="#">Menu2</a>
    </div>

这是固定顶部菜单的 CSS

.topnav {
background-color: #333;
overflow: hidden;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}

所以问题是：我怎样才能使它成为一切之上？

标签： htmlcss

Answer 1

.topnav {
    background-color: #333;
    overflow: hidden;
    z-index: 100; /* or 999 */
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
}