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

Issue

I tried to position the main element above the header and below the nav element, I used the z-index but it doesn't work properly.

I use position sticky in header and position relative in main element because some stuff uses position absolute.

Do you have any solution for my case?

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>

Solution

Just re-work your HTML so that it follows that order. If you want your nav element at the top and header at the bottom, don't nest the nav in the 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>

Answered By - カメロン