如何让绝对定位的弹出栏“按下”其他内容？

Question

假设我的页面上有一个固定位置的导航栏。当用户失去与应用程序的连接时，我希望在导航栏上方弹出一个红色警告栏。我使用position绝对位置和top：0来实现此目的。我怎样才能按下导航栏，使其不会隐藏在警告栏后面？

Codepen演示：https://codepen.io/meek/pen/RjKxbz

HTML

<div class="nav">menu</div>
<div class="warning">warning</div>

CSS

.nav {
  background-color: #ccc;
  position: fixed;
  width: 100%;
  height: 40px;
}

.warning {
  background-color: red;
  width: 100%;
  position:absolute;
  top: 0px;
}

感谢。

Answer 1

您可以在导航栏中输入警告。这样，当警告出现时，导航器内部的内容将被按下。将背景颜色和其他细节放在导航内部的div上。将警告div放在正上方。