Question

我确定这是一个非常基本的问题。我首先使用默认导航栏，其下方有2个按钮。我将导航栏更改为固定的顶部导航栏，现在按钮位于其后面。如何指定按钮的中断，或者如果有更好的方法来指定按钮的位置而不使用中断（我相信它有），它是什么？

Answer 1

最简单的解决方案可能是在按钮上添加relative position，并设置从top到固定导航栏高度的距离（加上一些额外的）用于填充的像素。）

Answer 2

当您修改位置时，您将其从页面流中取出。对于按钮，我建议使用上边距将它们分开。您可以使用特定的大小和名称，但这样的东西。另外，将class="topRow"添加到包含按钮的容器中。

.topRow{
    margin-top:25px;
}

Answer 3

您可以添加位于导航栏下方的间隔符。如果在同一个CSS中定义间隔器和导航栏的高度，则只需在一个位置指定高度即可获得额外的好处。在间隔符之后，其他所有内容都将被定位，就好像导航栏的底部是页面顶部一样。

＆＃13;

.navbar{
  position:fixed;
  width: 100%;
  background:grey; 
}

.spacer, .navbar{
  height: 50px;
}

＆＃13;

<nav class=navbar>Hey I'm the navbar</nav>
<div class=spacer>I'm hidden under the nav bar</div>
<button class=button>button 1</button>
<button class=button>button 2</button>

＆＃13;

固定顶部导航栏覆盖按钮

3 个答案: