Stack 2 Fixed Divs always top

Question

I am trying to figure out the easiest way to stack 2 Fixed divs one is dynamic one is static.

My nav has the height of 76px fixed position. but i have another div on top that will hide or show based on a database value. it pushes everything down as it should, the problem is when i scroll the nav is where it should be but the message div scrolls with the body it should stay on top of the nav 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>

Answer 1

Just add fixed position to .message and then add a margin-top of 50px to the nav like this:

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