Html 堆栈2固定div始终位于顶部

我试图找出最简单的方法来堆叠2个固定div一个是动态的一个是静态的

我的导航高度为76px固定位置。但我在上面有另一个div，它将根据数据库值隐藏或显示。它会按应有的方式向下推送所有内容，问题是当我滚动导航时，导航显示在应该的位置，但消息div与正文一起滚动，它应该保持在导航div的顶部

.nav {
    background-color: #000;
    height: 76px;
    width: 100%;
    position: fixed;
    z-index: 100;
}


.message{
    background-color: #ff0000;
    height: 50px;
    width: 100%;
}


<div class="message">Global Message</div>
<div class="nav">Navigation</div>
<div id="hero" class="hero">
    <div id="content">
        <img src="images/icon.png">
    </div>
</div>

.nav{
背景色：#000；
高度：76px；
宽度：100%；
位置：固定；
z指数：100；
}
.留言{
背景色：#ff0000；
高度：50px；
宽度：100%；
}
全球信息
航行

只需将

固定

位置添加到

。消息

，然后将

50像素的
边距顶部
添加到导航中，如下所示：


.nav{
背景色：#000；
高度：76px；
宽度：100%；
位置：固定；
边缘顶部：50px；
z指数：100；
颜色：#fff；
}
.留言{
背景色：#ff0000；
高度：50px；
宽度：100%；
位置：固定；
}
全局消息
航行