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 */
}

所以问题是:我怎样才能让它成为一切之上的东西？

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 */
}