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

【问题标题】：Stack 2 Fixed Divs always top堆栈 2 固定 div 始终位于顶部
【发布时间】：2016-11-20 19:38:23
【问题描述】：

我正在尝试找出堆叠 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>

【问题讨论】：

标签： html css

【解决方案1】：

只需将fixed 位置添加到.message，然后将margin-top 的50px 添加到导航中，如下所示：

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

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

<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>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

【讨论】：