Question

我正在慢慢进入CSS和HTML，到目前为止，我一直在制作一个页面，其中顶部有一个导航栏，下面有一个元素列表。所述列表中的元素也会改变它们的形状，但这不是我的问题的目的。我遇到的问题是，在滚动时，容器类元素只是在导航栏的顶部滚动，使它有点无意义。

header {
  position: fixed;
  display: flex;
  left: 0;
  right: 0;
  top: 0;
  margin: 0;
  background: red;
}

main {
  margin: 0 auto;
  padding-top: 80px;
  background: yellow;
}

.container {
  margin: 10px;
  display: flex;
  border: 1px solid #aaa;
  height: 200px;
  min-width: 700px;
  flex-grow: 1;
  position: relative;
}

.container div.containerinfo {
  display: flex;
  flex-wrap: wrap;
  flex: 0.75;
  flex-direction: column;
  background-color: white;
}

<header>
  <h1 id="title">Navbar</h1>
</header>
<main>
  <section>
    <div class="container">
      <img src="broken" alt="broken link">
      <div class="containerinfo">
      </div>
    </div>

    <div class="container">
      <img src="broken" alt="broken link">
      <div class="containerinfo">
      </div>
    </div>

    <div class="container">
      <img src="broken" alt="broken link">
      <div class="containerinfo">
      </div>
    </div>

    <div class="container">
      <img src="broken" alt="broken link">
      <div class="containerinfo">
      </div>
    </div>

    <div class="container">
      <img src="broken" alt="broken link">
      <div class="containerinfo">
      </div>
    </div>
  </section>
</main>

这是一个jsfiddle：https://jsfiddle.net/ckuuxqqr/6/

任何帮助都将不胜感激。

Answer 1

由于您的header在源代码中排在第一位，因此黄色div元素将在z轴上方位于其上方。

以下两个选项可让标题显示在顶部：

将z-index: 1添加到header。这会将header移动到其他元素的顶部，而不会有更高的z-index值。（所有元素的默认值为auto。）revised fiddle
将header元素放在源代码的最后。 revised fiddle

Answer 2

您需要添加z-index：1;到你的标题css。 z指数将确定＆＃34;堆叠＆＃34;页面上的元素。索引越高，它在页面上堆叠的越高。

Answer 3

添加z-index及其原因 - ＆gt; https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Flexbox元素滚动导航栏

3 个答案: