如何添加粘性警报箱？

Question

我想要一个独立的警报通知粘贴在标题下面，而不管页面的内容。

如果您注意到通知栏位于标题空白区域内。装这个烤面包机最好的方法是什么？

我已经尝试创建了一个完整的页面环境，其中有一个页眉、一个左边栏和一个右边栏。

有人能帮帮忙吗？我们将非常感谢您的建议。

致敬，比尔

​

    .top-head {
      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
      background: #FFFFFF;
      width: 100%;
      float: left;
      height: 50px;
    }

    .top-head h1 {
      color: #fff;
      font-size: 26px;
      font-weight: 600;
      line-height: 50px;
      margin-bottom: 0px;
    }

    .top-menu-right {
      float: right;
    }

    .top-head .user-bar {
      text-align: right;
      float: right;
    }

    .top-head .user-bar a {
      color: rgba(0, 0, 0, .7);
      font-size: 15px;
      font-weight: 400;
      line-height: 49px;
      position: relative;
      padding: 0 7px;
    }

    .top-head .user-bar a:hover {
      color: #02b875;
    }

    .top-head .user-bar a i {
      margin-right: 6px;
    }

    .top-head .user-bar .ping {
      background: #02b875;
      border-radius: 50%;
      height: 10px;
      position: absolute;
      right: 9px;
      top: 13px;
      width: 10px;
      z-index: 1;
    }

    .top-head .user-bar img {
      float: left;
      height: 32px;
      width: 32px;
      margin-top: 7px;
    }

    .notification-bar {
      padding: 1.1rem 1.25rem;
      text-align: center;
      font-size: 15px !important;
      width: 100%;
    }

    .notification-bar a {
      color: #FFFFFF;
      text-decoration: underline;
    }

    .notification-danger {
      background-color: #dd4b39;
      color: #F1F1F1;
    }
    
    
.left-sidebar {
  background: #353752;
  text-align: center;
  color: #a0a3b3;
  font-size: 18px;
  vertical-align: middle;
  padding: 8% 0 5%;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0;
  bottom: 0;
  width: 300px;
}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <div class="top-head fixed-top">
      <div class="container container-responsive">
        <div class="row">
          <!-- Brand Logo -->
          <div class="col-md-2 col-lg-3 logo-bar">
            <h1><a href="index.php"><strong>Logo</strong></a></h1>
          </div>


            </nav><!-- END OF NAV BAR -->
           </div><!-- END OF TOP MENU RIGHT -->
          </div><!-- END OF COLUMN USER-BAR -->
        </div><!-- END OF ROW -->
      </div><!-- END OF CONTAINER -->
    </div><!-- END OF NAVIGATION -->

    <div class="notification-bar notification-danger">
       Please enter a valid email address.
    </div>

<div class="row">
<div class="col-3 left-sidebar"></div>
<!-- START OF RIGHT PANEL -->
<div class="col-9">
   <p>Hello World</p>
</div><!-- END OF .col-9 -->
</div>

​

Answer 1

尝试在.tification-bar类中添加以下css。

position: absolute;
top: 58px;