如何将主要元素放在标题上方和导航元素下方？答案

【问题标题】：How do I place main element above header and below nav element?如何将主要元素放在标题上方和导航元素下方？
【发布时间】：2022-01-05 09:50:57
【问题描述】：

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

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

你对我的案子有什么解决办法吗？

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>

【问题讨论】：

标签： html css css-position z-index

【解决方案1】：

只需重新处理您的 HTML，使其遵循该顺序。如果您希望导航元素位于顶部而标题位于底部，请不要将 nav 嵌套在标题中。

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>

【讨论】：

我仍然想将导航嵌套在标题元素中。而是将标题和导航分开，我制作了一个 div 元素作为添加
@ShaefulAmin 另外，z-index 将元素按层而不是按顺序放置在其他元素的顶部或后面。