Question

我想制作一个顶部导航“固定”栏。
我目前正在W3C上试验代码。

不幸的是导航栏没有固定，我该如何解决？

注意：我已尝试position: fixed;，但无法按预期工作。

Answer 1

试试这个CSS：

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

请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/position

如果您使用类似的导航栏，您通常希望给它一个高度（例如50px），然后将内容的其余部分偏移那么多（例如内容容器上的margin-top: 50px;。< / p>

Answer 2

如果您在W3Schools上完全复制他们的代码并将以下内容添加到ul：

width: 100%;
top: 0;
left: 0;
position: fixed;

你会在ul上得到一个固定的位置，它会被一直推到左边（没有间距），一直向上推（没有间距）。宽度（100％）只是在Web浏览器上拉伸块（就其大小而言）。您还可以在现有的ul上添加一个类或一个id（如果你有多个现有的ul元素），可以使用div#fixed-navigation作为id或div.fixed-navigation作为类（在CSS中）。

总的来说，你要么拥有：<ul id="fixed-navigation">或<ul class="fixed-navigation">（如果你选择使用id或class属性）。

我在JSFiddle上为您创建了一个工作示例：https://jsfiddle.net/799rm54n/

如何制作固定的响应式顶部导航？

2 个答案: