如何添加粘性警報框？

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

嘗試在.notification-bar類中添加以下CSS。

position: absolute;
top: 58px;