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

Question

我有一个导航栏固定在顶部的网页，页面的其余部分应该在导航栏下方向上滚动。大多数元素确实在它后面滚动。三个图像并排显示。两个外部图像（img 1 和 img 3）按应有的方式在导航栏下方滚动，但中央图像（img 2）不会。它在导航栏上方滚动。我认为这与它是绝对位置有关，但我怎样才能让这幅图像表现得像页面上的其他所有图像一样？如果我删除绝对位置，图像将不再与其他图像对齐。如果我添加一个 1 的 z-index，它仍然会越过导航栏，尽管导航栏的 z-index 为 300。如果我给图像一个 z-index 为 -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 值应用到 <nav> 的祖先，它恰好是 div.navigate，现在有 z-index:300。请参阅下面的演示。

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

此外，我不得不向 .spread1 添加 2 个规则集，因为 OP 没有滚动。这 2 个更改不是解决方案的要求，只是为了演示图像在 <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;
}

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

Answer 2

因为你的 navigate class 和 container class 在同一个 "level" 上，你应该在那里应用你的 z-indexing。有些项目会出现在您的菜单上方是因为 position: absolute 并且在 navigate class 上应用您的 z-index 将修复它。

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

Answer 3

你曾经为 CSS 使用过 flexbox 吗？它使在页面上定位和对齐元素变得容易得多。

当我解决对齐问题时，我的第一步通常是删除不需要的元素。你似乎有很多 div。我知道您可能没有发布所有代码来说明为什么这些嵌套 div 可能与您的项目相关，但为了我的回答，我将它们取出或更新它们以添加 HTML5 元素，例如 header.

Flexbox 提供了一种在容器中动态布局元素的方法。如需深入了解 description/tutorial，请查看此 here。

您希望将 imgHolder 元素设置为 display: flex，并将子图像设置为 flex: 1。这将使它们更接近您想要的位置，而不会混合绝对定位和浮动。浮动实际上只应该与 text/img 位置一起使用（尽管我们通常不遵循这一点）。

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

之后，您需要调整图像以将它们对齐到您想要的位置。有一些 css 属性，例如 justify-content 可以帮助您将它们居中、向右、向左等放置。

最后做了一个工作箱here供大家参考

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

How to get image to scroll behind navbar

html

css

z-index

演示