堆棧2固定的Div總是頂部

Question

我想弄清楚最簡單的方法來堆棧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> 

Answer 1

只需添加fixed位置.message，然後添加的50px一個margin-top的導航是這樣的：

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