如何将主要元素放在 header 上方和导航元素下方？

Question

我试图将主要元素定位在 header 上方和导航元素下方，我使用了 z-index 但它无法正常工作。

我在 header 中使用粘性位置，在主要元素中使用相对位置，因为有些东西使用绝对位置。

你们对我的情况有什么解决办法吗？

header,
nav,
main {width: 100%;}
header{
  height: 10rem;
  position: sticky;
  top: 0;
  background: blueviolet;
  z-index: 1;
}
nav {
  height: 4rem;
  background: yellow;
  z-index: 3;
}
main {
  height: 30rem;
  position: relative;
  background: crimson;
  z-index: 2;
}

div {
  display: flex;
}

<header>
  <nav>navbar</nav>
  header
</header>
<main>main</main>

Answer 1

只是 re-work 您的 HTML 以便它遵循该顺序。如果您希望导航元素位于顶部而 header 位于底部，请不要将 nav 嵌套在 header.

中

header,
nav,
main {width: 100%;}
header{
  height: 10rem;
  position: relative;
  top: 0;
  background: blueviolet;
  z-index: 1;
}
nav {
  height: 4rem;
  background: yellow;
  z-index: 3;
}
main {
  height: 30rem;
  position: relative;
  background: crimson;
  z-index: 2;
}

div {
  display: flex;
}

<nav>navbar</nav>
<main>main</main>
<header>header</header>

如何将主要元素放在 header 上方和导航元素下方？

How do I place main element above header and below nav element?

html

css

z-index

css-position