将导航栏定位在页面顶部，但在主要内容上失去可点击性

我有一个页面，当我滚动内容时，我希望导航栏始终显示在页面顶部。我能够通过使用以下CSS添加来实现这一点：

.navbar {
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%;
overflow: hidden;
}
.container-main {
width: 97%;
margin-right: 40px;
margin-left: 5px;
padding-right: 5px;
padding-left: 0px;
min-height: 75vh; /* will cover the 75% of viewport */
overflow: hidden;
display: block;
position: relative;
padding-bottom: 125px; /*height of your footer*/
margin-top: 30px;
z-index:-1
}

问题是，一旦我添加了z-index:-1，主要内容就失去了被点击的能力。如果没有z-index:-1，那么主容器的内容会在导航栏的顶部滚动，而不是在导航栏后面。我需要做什么才能保持导航栏在顶部，滚动导航栏下面的内容，并保持点击主容器中项目的能力？这是_layout页面的简化版本，所有这些都驻留在其中：

<body>
<header>
<div class="navbar navbar-inverse" id="edadTopNavigation">
<div class="container-fluid app-navbar">
<div class="navbar-collapse collapse app-navbar-text-section">
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="adminDropdownMenuLink" href='#' data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><div class="fa fa-cog"></div> Admin</a>
<div class="dropdown-menu" aria-labelledby="adminDropdownMenuLink">
<div>
<a class="nav-link text-dark" asp-area="" asp-controller="Acronym" asp-action="Index">Acronyms</a>
</div>                      
<div>
<a class="nav-link text-dark" asp-area="" asp-controller="User" asp-action="Index">Users</a>
</div>
</div>
</li>
</ul>                    
</div>
</div>
</div>
</header>
<div class="container-main">
<main role="main">
@RenderBody()
</main>
</div>
<footer style="position:relative;top:0">
<div>
</div>
</footer>}
</body>

我试图为这种情况制作一个简单的沙盒，并对导航栏进行了如下编码：

#nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
color: fff; /* For testing */
background-color: #333; /* For testing*/
padding: 1rem; /* For testing*/
z-index: 100;
}

并制作了一个简单的容器，里面有一个主要元素，并在其中添加了一堆链接和段落，以测试我是否可以点击链接&是否选择段落

容器的样式：

.container {
background-color: orangered; /* For testing*/
max-width: 1200px;
height: 700vh; /* To make the container super long to test clickability it */
margin: 5rem auto; /* To center the container */
z-index: -50;
}

看起来效果不错，试着确保导航栏的高度不会填满视口高度的100%，并对样式进行一些修改，比如添加

左：0；

在导航栏样式中查看它是否有效。

只需对导航栏使用更高的z索引。主容器并没有在导航栏上滚动。你的代码很好，但是，你需要把主元素推到导航栏下面一点。看看这个代码：

.navbar {
position: fixed;
/* Set the navbar to fixed position */
top: 0;
/* Position the navbar at the top of the page */
width: 100%;
overflow: hidden;
z-index: 2;
background-color: #fff;
border-bottom: 1px solid #ddd;
padding: 20px;
}
.container-main {
position: relative;
top: 50px;
width: 97%;
margin-right: 40px;
margin-left: 5px;
padding-right: 5px;
padding-left: 0px;
min-height: 75vh;
/* will cover the 75% of viewport */
overflow: hidden;
display: block;
position: relative;
padding-bottom: 125px;
/*height of your footer*/
margin-top: 30px;
z-index: 1;
}

<html>
<body>
<header>
<div class="navbar navbar-inverse" id="edadTopNavigation">
<div class="container-fluid app-navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
</div>
</header>
<div class="container-main">
<main role="main">
@RenderBody()
</main>
</div>
<footer style="position:relative;top:0">
<div>
</div>
</footer>
</body>
</html>

相关内容

最新更新

热门标签：