在两个其他DIV之间显示HTML DIV

Question

我已经用SO帮助构建了一个HTML CSS Grid/Flexbox组合布局，并取得了相当的进展。但现在我遇到了一个问题，显示一个名为类mobile_nav的额外的div。

当用户点击SWITCH应该激活（我可以google一下，因此不是问题的一部分）和DIV <div class="section site-menu">和DIV <div class="section site-header">之间被显示出来（这就是我想要和不工作）。所以最好称之为移动导航。

有人可以看到它有什么问题吗？

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

你只需把你的.site-menu DIV位置相对。

它被设置为绝对，所以不在相对层次结构中。

看一看这个网页有关position属性，https://www.w3schools.com/css/css_positioning.asp它真的很好解释

编辑

其实你可以删除的位置属性。如果您没有指定任何内容，那么位置是static，因此项目将被放置在一个在另一个之下。 另一个链接对您而言可能是有用的：CSS Display