Question

我正在使用bootstrap构建一个站点。导航栏不像静态元素那样相对于其他身体元素。在某些情况下，身体中的元素会被向上推并覆盖导航栏。如果我放大页面并且正文中的所有内容都覆盖了导航栏，使链接无法点击，则会发生这种情况。 Here is one example of what is occuring.我尝试了一些事情：我已经完成了向导航栏添加了bootstrap类.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和.navbar-custom的CSS：

.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 Repo

Answer 1

我明白了。我有一些代码导致div垂直居中。这导致放大时div会覆盖导航栏。

罪魁祸首是我正在调用div的一些CSS：

＆＃13;

.vert-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

＆＃13;

身体内容重叠bootstrap导航栏？

1 个答案: