如何让绝对定位的弹窗“下推”其他内容？答案

【问题标题】：How to make absolute positioned pop-up bar "push down" other content?如何让绝对定位的弹窗“下推”其他内容？
【发布时间】：2017-11-09 23:19:04
【问题描述】：

假设我有一个顶部有一个固定位置导航栏的页面。当用户失去与应用程序的连接时，我希望在导航栏上方弹出一个红色警告栏。我使用 position absolute 和 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;
}

谢谢。

【问题讨论】：

您必须对其进行动画处理，以便以与警告栏进入相同的速度移动其顶部位置，但最简单的方法是将警告栏添加到导航栏并使其相对和将高度更改为最小高度。你能显示使警告出现的代码吗

标签： css

【解决方案1】：

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

【讨论】：