在固定导航顶栏之前显示div

Question

我有一个固定的顶部栏，现在我需要在此元素之前添加一个div来显示一条消息。

两者都应固定。 首先是警报消息，然后是菜单。 我怎样才能做到这一点？

<div class="panel-msg">
  Important message here
</div>

<nav id=" mainNav " class="navbar navbar-default navbar-fixed-top " role="navigation ">
  <div class="container ">
    <div class="navbar-header ">
      <h1>
      demo
      </h1>
    </div>
  </div>
</nav>
<div class="demo ">
</div>

演示

Answer 1

z-index仅在定位时才有可能，因此请给class panel-msg绝对位置，并赋予z-index高于navbar如下所示：

 .panel-msg{
      position:absolute;
      z-index:222222;
      top:0px;
    }

Answer 2

看起来，当您使用“ navbar navbar-default navbar-fixed-top”时，它将覆盖您所做的所有更改，并且始终将该navbar放在顶部。 如果删除“顶部”一词，它将显示味精面板。

这是上面带有警报消息的示例： http : //jsfiddle.net/sawqv3gp/

但它失去了固定的位置。 因此，您可能希望完全尝试其他布局。

我建议您更改设计以允许使用“导航栏标题”，并使用Bootstrap警报功能（也总是用户关闭警报）。

这是一个示例： http : //www.bootply.com/4FSUjc2qej

<div class="alert alert-info" role="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Holy guacamole!</strong> Best check yo self, you are looking very good.