2017-10-05 21 views
0

私は、HTML CSS Grid/Flexboxでかなりの進歩を遂げたレイアウトを助けます。しかし、今私はクラスmobile_navという名前のaddall divを表示することに問題があります。他の2つのDIVの間にHTML DIVを表示

それはSWITCHの際にユーザーがクリックアクティブにする必要があります(私は質問の一部ではないので、これをグーグルことができます)と(これは私が欲しいもので、これが動作していない)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>

+0

あなたの 'mobile_nav' divは' site-menu' divの下にあります。 'z-index'を' 2'に設定するだけで、あなたのテキストが表示されます。また、いくつかの要素を動的にアクティブ化したい場合は、JavaScriptまたはメディアクエリを少なくとも使用することができます(https://www.w3schools.com/css/css3_mediaqueries_ex.asp) –

+0

一般的には、 'z-index:2'私はテキストを見ることができます。しかし、それはナビゲーション上に配置されます。私はナビゲーションと英雄のイメージの間に持っていたい。 – 9Lx

+0

さて、あなたは、 '.site-menu'の' position'属性を 'relative'に設定するだけです。 –

答えて

0

あなただけの相対的にあなたの.site-menu divの位置を配置する必要があります。

相対的な階層ではなく絶対的に設定されています。

それは本当によく

EDIT

を説明していますhttps://www.w3schools.com/css/css_positioning.aspposition属性については、このページを見てください実際にあなただけの位置属性を削除することができます。何も指定していない場合は、位置はstaticになります。 あなたに便利な別のリンク:CSS Display

+0

しかし、なぜこの場合ですか?私は、他のすべての部署も自分たちの間にあり、「ポジション:相対」の必要はないことを意味します!異なるものがなければならない。 – 9Lx

+0

@ 9Lx私は私の答えを編集しました –

+0

私は誤解してはいけませんが、あなたが私のフィドル@コーデペンを見ると、ポジションなしで表示されます:この1つのdivは他の人の間に位置しません。しかし、他人はその位置を必要としない。どうして? – 9Lx

関連する問題