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

你必须爬上这棵树,找到它的祖先所在的等级 <nav> 是的兄弟姐妹 img2 的祖先。然后应用更高的 z-index <导航(>); 的祖先 div.navigate z-index:300 现在请参阅下面的演示。

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

此外,我还必须向 .spread1 因为OP没有滚动。这两个变化不是解决方案的要求,它只是在这里演示图像在下面滚动 <导航(>);

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

    .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;
        /* Added to test scroll */
        overflow-y:scroll;
        height:100vh;
    }
    .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;
        }

<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="http://placehold.it/50x50/000/fff?text=1'" alt="img1" />
    <img class="img2" src='http://placehold.it/50x50/0ff/000?text=2' alt="img 2" />
    <img class="img3" src="http://placehold.it/50x50/83d800/000?text=3" alt="img 3" />

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

navigate container 类处于相同的“级别”,您应该在那里应用z索引。某些项目将出现在菜单上方是因为 position: absolute 并应用您的 z-index 上 导航 课堂会解决这个问题。

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

你用过flexbox做CSS吗?它使在页面上定位和对齐元素变得更加容易。

当我对对齐问题进行故障排除时,我的第一步通常是删除不必要的元素。你好像有很多div。我意识到您可能没有发布所有代码来说明为什么这些嵌套div可能与您的项目相关,但为了我的回答,我将它们取出或更新,以添加HTML5元素,例如 header .

here .

您希望将imgHolder元素设置为 display: flex ,并将儿童图像 flex: 1

HTML

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

CSS

body {
  padding: 0;
  margin: 0;
}

header { 
  overflow: hidden;
  top: 0;
  width: 100%;
  position: fixed;
  z-index: 300;
  background-color: #ffffff;
  height: 110px;
}

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

.container {
  margin-top: 110px; /* height of header */
}

.imgHolder{
  display: flex;
  justify-content: center;
  padding: 20px 0px;
  background-color: #0555bd;
  color: #ffffff;
}

.imgHolder img {
  flex: 1;
}

justify-content 这有助于将它们放在中心、右侧、左侧等位置。

最后,我做了一个工作垃圾桶 here 供您参考。