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>

Demo

Answer 1

z-index仅适用于定位，因此请为panel-msg类提供绝对位置，并z-index高于navbar，如下所示：

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

Answer 2

看起来当您使用“navbar navbar-default navbar-fixed-top”时，它会覆盖您所做的任何更改，并始终将该导航栏置于顶部。如果删除“top”一词，则会显示msg面板。

以上是您的示例，上面有一条警告消息：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.

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

2 个答案: