固定顶部导航栏覆盖按钮答案

【问题标题】：fixed top navbar covering buttons固定顶部导航栏覆盖按钮
【发布时间】：2017-01-11 22:13:05
【问题描述】：

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

【问题讨论】：

标签： c# css asp.net twitter-bootstrap visual-studio

【解决方案1】：

当您固定位置时，您将其从页面流程中移除。对于按钮，我建议使用上边距将它们分开。您可以使用特定的尺寸和名称，但类似这样。另外，将class="topRow" 添加到包含按钮的容器中。

.topRow{
    margin-top:25px;
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

.navbar{
  position:fixed;
  width: 100%;
  background:grey; 
}

.spacer, .navbar{
  height: 50px;
}

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

【讨论】：