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>

Your `mobile_nav` div is below your `site-menu` div. Just set `z-index` to `2` and you'll see your text. Also, if you want to 'activate' some elements dynamically, you might want to use JavaScript or media queries at least (https://www.w3schools.com/css/css3_mediaqueries_ex.asp) — La masse, Oct 05 '17 at 20:57
In general yes, when i set to `z-index:2` i can see the text. But its placed over the navigation. I want to have it between the navigation and the hero image. — 9Lx, Oct 06 '17 at 06:47
Well there you go, you just need to set the `position` attribute of `.site-menu` to `relative` — La masse, Oct 06 '17 at 08:49
So simple? It works, thank you. Please post this one as answer and i will mark it as accepted answer. Thank you very much. — 9Lx, Oct 06 '17 at 09:25

La masse · Accepted Answer · 2017-10-06T17:10:55.190

0

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

edited Oct 06 '17 at 17:10

answered Oct 06 '17 at 09:27

La masse

1,190
1
10
24

But why is this the case? I mean all the other divs are also among themselves and there was no need for `position:relative`!? There must be something different. – 9Lx Oct 06 '17 at 17:05
Please dont misunderstand me but when you look at my Fiddle @Codepen, then you will see that without position:relative this one single div will not be position between the others. But the others dont even need the position. Why? – 9Lx Oct 06 '17 at 17:16
You did not remove the `position` attribute. I can see `position: absolute` there. Obviously, as explained in the article I provided, if you specify `position: absolute`, the div won't be in the same flow anymore. Just remove `position: absolute` – La masse Oct 06 '17 at 17:18
Thank you for explaining in detail. Its important for me to not only copy and paste some code/snippet instead to understand what happens why. – 9Lx Oct 06 '17 at 17:48

Show HTML DIV between two other DIVs

1 Answers1