絶対配置されたポップアップバーを他のコンテンツを "プッシュダウン"するにはどうすればいいですか？

Question

私は上に固定位置navbarを持つページがあると言います。ユーザーがアプリケーションとの接続を失ったとき、赤色の警告バーがナビゲーションバーの上にポップアップします。私はこれを達成するために絶対位置と上端：0を使用します。どのようにして、警告バーの後ろに隠されないようにNavbarを押し下げることができますか？

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を置く。