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，然后将margin-top 50px添加到导航中，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

Stack 2 Fixed Divs总是排名靠前

1 个答案: