堆栈导航栏和下一部分

Question

我想获得如下结果（这里是通过在导航栏中添加position: fixed获得的，这不是我想要的，我希望它在我向下滚动时消失）：

图片为以下div的背景。如果我删除 position: fixed，导航栏会上升到图像上方。 CSS 是否有正确的方法？

我正在使用 Bootstrap，我不知道这是否有助于节省一些时间。

Answer 1

要将导航栏放置在页面上的特定位置并使其随页面滚动，请将 position: relative 设置为包含导航栏的元素，然后将 position: absolute 设置为导航栏。

/* wrapper must have relative position */
.wrapper {
  position: relative;
}

/* nav must have absolute position */
nav {
  position: absolute;
  top: 60px;
  right: 12px;
  color: white;
  padding: 1rem;
  width: 50%;
  background-color: rgba(0, 0, 0, 0.3);
}
.content {
  border: 1px solid blue;
}
.content img {
  width: 100%;
  height: auto;
}

<div class="wrapper">
  <nav>Pretend this is a navbar</nav>
  <div class="content">
    <img src="https://picsum.photos/300/1000" />
  </div>
</div>

堆栈导航栏和下一部分

Stack navbar and the next section

css

css-position

bootstrap-4