我正在建立一个网站与引导。相对于正文的其他元素，导航条的行为不像一个静态元素。在某些情况下，身体中的元素会被推高并覆盖导航条。如果我放大页面，并且正文中的所有内容都覆盖了导航条，使得链接无法点击，就会发生这种情况。下面是正在发生的一个例子。我已经尝试了一些事情:我已经完成了添加引导类。navbar-static-top到导航栏，但没有效果。我读过很多关于导航条遮住身体的报道，但我的情况正好相反。我也考虑过改变z-index，但是页面内容会被推到导航条后面。我在Stack上看了很多问题，但没有一个能解决我的问题。HTML:
<html lang="EN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link href="/stylesheets/bootstrap.css" rel="stylesheet">
<link href="/stylesheets/custom.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header">
...various links...
</div>
</div>
</nav>
</body>
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
.navbar-custom {
margin-bottom: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
text-transform: uppercase;
font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
background-color: black;
}
我的冲动是改变。navbar的位置为static而不是"相对"，但这也没有做到这一点。我怎样才能使导航栏的行为像一个普通的静态元素，而不是得到重叠的其余页面内容?
GitHub回购
我明白了。我有一些代码使div垂直居中。这会导致导航栏在放大时被div覆盖。
罪魁祸首是我在问题div上调用的一些CSS:
.vert-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}