私は、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">
の間に表示されて。それでは、モバイルナビゲーションと呼んでください。
誰かが間違っていると見ることができますか?
* {
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>
あなたの 'mobile_nav' divは' site-menu' divの下にあります。 'z-index'を' 2'に設定するだけで、あなたのテキストが表示されます。また、いくつかの要素を動的にアクティブ化したい場合は、JavaScriptまたはメディアクエリを少なくとも使用することができます(https://www.w3schools.com/css/css3_mediaqueries_ex.asp) –
一般的には、 'z-index:2'私はテキストを見ることができます。しかし、それはナビゲーション上に配置されます。私はナビゲーションと英雄のイメージの間に持っていたい。 – 9Lx
さて、あなたは、 '.site-menu'の' position'属性を 'relative'に設定するだけです。 –