html - 如何拥有向下滚动时不改变大小的固定导航栏？

Question

我的导航栏横跨页面宽度，但当我编写 object: fixed; 时，导航栏缩小并覆盖文本。我希望导航栏像 dootrix.com ，它在网站中根深蒂固，向下滚动时不会缩小!

我用我的代码创建了一个 JSFiddle:https://jsfiddle.net/kpsq8r9m/

这是我的 CSS:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  text-align: center;
  border-style: solid;
  border-color: darkgrey;
  border-width: 6px;
  position: fixed;
}

li {
  display: inline-block;
}

li a {
  display: block;
  color: white;
  padding: 14px 50px;
  text-decoration: none;
}

如有任何帮助，我们将不胜感激!

编辑:当它“收缩”时我的意思是如果我没有 position:fixed;它会扩展到整个页面，但当我这样做时它缩小了。为了了解我在说什么，我建议您在谷歌浏览器中尝试一下。

Answer 1

请尝试:

.navbar-fixed {
  top: 0;
  z-index: 100;
  position: fixed;
  width: 100%;
}

z-index:100 应该可以解决问题。