Show HTML DIV between two other DIVs

Question

I have build with SO help a HTML CSS Grid/Flexbox compbined Layout with quite progress. But now i have a problem with showing an additionall div named class mobile_nav.

It should be activated when the user clicks on SWITCH (i can google this, therefore not part of question) and been displayed between DIV <div class="section site-menu"> and DIV <div class="section site-header"> (this is what i want and which is not working). So better call it as mobile navigation.

Can someone see whats wrong with it?

CodePen

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.site-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}

.site-menu {
  background-color: #000;
  color: #fff;
  position: absolute;
  /* padding: 8px 20px 9px; */
  width: 100%;
  z-index: 1;
}

.hero {
  background-image: url('https://wallpaperbrowse.com/media/images/landscape-mountains-nature-clouds.jpg');
  background-size: cover;
  background-position: center;
  width: 100wh;
  height: 100vh;
  display: flex;
}

.hero-content {
  background-color: #000;
  color: #fff;
  display: block;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-directon: column;
  margin: auto;
}

.bottom-right {
  position: absolute;
  right: 0;
  margin-top: -1.2em;
  background: black;
  color: white;
}

#nav,
#left_side,
#top_nav,
#bottom_nav {
  display: flex;
}

#nav {
  border-bottom: 1px solid grey;
}

#title {
  margin-left: 10px;
}

#menu_switch {
  margin-right: 10px;
}

#left_side {
  flex-direction: column;
  width: 100%;
}

#top_nav {
  display: flex;
  justify-content: flex-end;
  height: 60px;
  border-bottom: 1px solid grey;
  align-items: center;
}

.left {
  margin-right: auto;
}

#bottom_nav {
  align-items: center;
  height: 38px;
}

.nav_item {
  padding: 5px;
}

.nav_item:first-child {
  background-color: red;
  margin-left: 10px;
}

#logo {
  background-color: black;
  margin-left: 24px;
  height: 100px;
}

<div class="site-wrapper">
  <div class="section site-menu">
    <div id="nav">
      <div id="logo">
        100x100px Logo
      </div>
      <div id="left_side">
        <div id="top_nav">
          <div id="title" class="nav_item left">TITLE OF PAGE</div>
          <div id="menu_about" class="nav_item right">ABOUT</div>
          <div id="menu_signup" class="nav_item right">SIGN UP</div>
          <div id="menu_follow" class="right nav_item">FOLLOW</div>
          <div id="menu_switch" class="right nav_item">SWITCH</div>
        </div>
        <div id="bottom_nav">
          <div class="nav_item">AZURE</div>
          <div class="nav_item">SHAREPOINT</div>
          <div class="nav_item">BI & DWH</div>
          <div class="nav_item">.NET DEVELOPMENT</div>
          <div class="nav_item">MOBILE DEVELOPMENT</div>
          <div class="nav_item">WORDPRESS</div>
          <div class="nav_item">NOTES</div>
        </div>
      </div>
    </div>
  </div>
  <div class="section mobile_nav">
    <div>dlfdh afj hdslf</div>
    <div>bla bla bla</div>
  </div>
  <div class="section site-header">
    <div class="hero">
      <div class="hero-content">
        <h1>If you can dream it, you can do it...</h1>
        <p class="subhead">lets do it !</p>
      </div>
    </div>
    <div class="bottom-right">
      <span>This text should be positioned at the bottom right of the Hero Image</span>
    </div>
  </div>
  <div class="section undefined">
    <div class="undefined-content">
      <p>Lots of content will go in here</p>
    </div>
  </div>
  <div class="section site-footer">Footer</div>
</div>

Answer 1

You just need to put your .site-menu div position to relative.

It was set to absolute so not in the relative hierarchy.

Have a look at this page about the position attribute, https://www.w3schools.com/css/css_positioning.asp it's really well explained

EDIT

Actually you can just remove the position attribute. The position is static if you specify nothing so the items will be positioned one below the other. Another link that could be useful for you : CSS Display