Question

我有一个网页，导航栏固定在顶部，页面的其余部分应向上滚动到导航栏下方。大多数元素都在它后面滚动。并排有三个图像。两个外部图像（img 1＆amp; img 3）按原样滚动到导航栏下方，但中心图像（img 2）没有。它滚动到导航栏上方。我认为它与位置绝对有关，但是我怎样才能让这一个图像像页面上的其他内容一样？如果我删除绝对位置，则图像不再与其他图像一致。如果我添加z-index为1，它仍会越过导航栏，尽管导航栏的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;
    }

演示

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

由于您的navigate班级和container班级位于同一级别＆＃34;级别＆＃34;你应该在那里应用你的z索引。菜单上方会显示一些项目，因为position: absolute并且在z-index课程中应用navigate会修复它。

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

Answer 3

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

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

Flexbox提供了一种动态布局容器中元素的方法。有关深入的说明/教程，请查看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供你参考。

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

3 个答案:

演示