Zeige HTML DIV zwischen zwei anderen DIVs

Question

Ich habe mit SO Hilfe ein HTML CSS Grid/Flexbox kompiliert Layout mit ziemlich Fortschritt. Aber jetzt habe ich ein Problem mit der Anzeige einer zusätzlichen div namens Klasse mobile_nav.

Es soll aktiviert werden, wenn der Benutzer auf SWITCH klickt (i kann dies google, also nicht Teil der Frage) und <div class="section site-header"> zwischen DIV <div class="section site-menu"> und DIV angezeigt worden ist (das ist, was ich will und was nicht funktioniert). Also nenne es besser als mobile Navigation.

Kann jemand sehen, was damit falsch ist?

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

Sie müssen nur Ihre .site-menu div Position relativ setzen.

Es wurde auf absolut festgelegt, also nicht in der relativen Hierarchie.

Werfen Sie einen Blick auf diese Seite über das position Attribut, https://www.w3schools.com/css/css_positioning.asp es wirklich gut

erklärt hat

EDIT

Eigentlich kann man nur die Position Attribut entfernen. Die Position ist static Wenn Sie nichts angeben, werden die Elemente untereinander positioniert. Ein weiterer Link, der für Sie nützlich sein könnte: CSS Display