Question

我在网站上放了一个从引导程序中获取的粘性导航栏，该导航栏效果很好。包含在该导航栏中，我想要的图像应该比导航栏看起来更大/更小。当您打开页面时，此图像应以完整尺寸显示。滚动时，图像和导航栏应一起向上移动到屏幕顶部。因此，图像的重叠部分应该消失，只有其余部分像导航栏一样保持可见的粘性。

我是CSS的新手，所以我尝试了一些在此论坛和其他论坛上发现的随机内容，但到目前为止还行不通。

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
    <div class="row sticky-top">
      <div class="col-4">
        <ul class="nav nav-tabs">
          <li class="nav-item">
            <a class="nav-link" href="#top"><img src="https://cdn.sstatic.net/Img/ico-binoculars.svg" style="width: 100%"></a>
          </li>
        </ul>
      </div>
      <div class="col-8">
        <ul class="nav nav-tabs">
          <li class="nav-item">
            <a class="nav-link" href="#1">menu item 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#2">menu item 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#3">menu item 3</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#4">menu item 4</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#5">menu item 5</a>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>

徽标图像和导航栏的顶部边框都显得很粘，底部边框不对齐。图片应显示我的意思：1

Answer 1

对于重叠部分，我建议在nav和img上使用z–Index属性

粘性导航栏：导航栏中的重叠图像应仅部分粘性

1 个答案: