如何让图像滚动到导航栏后面

Question

我有一个网页，其导航栏固定在顶部，页面的其余部分应在导航栏下方向上滚动。大多数元素都会在其后面滚动。并排有三幅图像。两个外部图像（img 1 和 img 3）按其应有的方式在导航栏下方滚动，但中心图像（img 2）却没有。它滚动到导航栏上方。我认为这与它的绝对位置有关，但是我怎样才能让这张图像的行为像页面上的其他所有图像一样？如果我删除绝对位置，图像将不再与其他图像对齐。如果我添加 z 索引 1，它仍然会越过导航栏，尽管导航栏的 z 索引为 300。如果我给图像的 z 索引为 -1，它会完全消失。我尝试向不同的元素添加不同的 z-index 值，但找不到有效的组合。

这是我的相关CSS：

.navigate{
    overflow: hidden;
    top: 0;
    width: 100%;
    position: fixed;
}

    .toggle,
    [id^=drop] {
        display: none;
    }


    nav { 
        margin:0;
        padding: 0;
        background-color: #ffffff;
        z-index: 300;
    }

    nav:after {
        content:"";
        display:table;
        clear:both;
    }
    .container{
        width: 100%;
        margin-top: 70px; 
    }

    .spread1{
        display: inline-block;
        width: 100%;
        padding: 20px 0px;
        background-color: #0555bd;
        color: #ffffff;
    }
    .imgHolder{
        width:60%;
        margin: auto;
    }
    .img1{
        display: block;
        width: 27%;
        left: 0;
        right: 0 ;
        float: left;
        }
    .img2{
        position: absolute;
        width: 25%;
        display: block;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .img3{
        width: 27%;
        display: block;
        left: 0;
        right: 0 ;
        float: right;
        }

这是 HTML：

<div class="navigate">      
   <nav>
        <div id="logo"><img src="images/logo.png" alt="AMD logo"></div>

        <label for="drop" class="toggle">Menu</label>
        <input type="checkbox" id="drop" />
            <ul class="menu">
                <li><a href="index.php">Home</a></li>
                <li> <a href="about.php">About</a></li>
                     <li><a href="contact.php">Contact</a></li>
               </ul>
        </nav>
      </div>
<div class="container">
    <div class="spread1">
<div class="imgHolder">
    <img class="img1" src="images/image1.jpg" alt="img1" />
    <img class="img2" src="images/image2.jpg" alt="img 2" />
    <img class="img3" src="images/image3" alt="img 3" />

</div>
</div>
</div>

Answer 1

<nav>您必须沿着树向上找到 的祖先是 的祖先的兄弟姐妹的级别img2。然后z-index对 s 祖先应用一个更高的值<nav>，这恰好是现在div.navigate的祖先z-index:300。请参阅下面的演示。

.navigate{
    overflow: hidden;
    top: 0;
    width: 100%;
    position: fixed;
    /* FIX */
    z-index:300;
}

另外，我必须添加 2 个规则集，.spread1因为 OP 没有滚动。这两个更改不是解决方案的要求，只是为了演示图像在<nav>

   .spread1{
        display: inline-block;
        width: 100%;
        padding: 20px 0px;
        background-color: #0555bd;
        color: #ffffff;
        /* Added to test scroll */
        overflow-y:scroll;
        height:100vh;
    }

演示

.navigate{
    overflow: hidden;
    top: 0;
    width: 100%;
    position: fixed;
    /* FIX */
    z-index:300;
}

   .spread1{
        display: inline-block;
        width: 100%;
        padding: 20px 0px;
        background-color: #0555bd;
        color: #ffffff;
        /* Added to test scroll */
        overflow-y:scroll;
        height:100vh;
    }