How to make icons/(content) placed behind navigator bar while scrolling?

Dustin Ivander 0
Viewed 32

I'm using google icons. But when scrolling the page, the icon position is in front of the navbar. Icon position is using relative position because I want the icon position vertically centered, but it makes the icon located in front of the navigation bar when scrolling, I want the icon located behind the navbar. This is the screenshot of the website

#navbar {
  overflow: hidden;
  background-color: #151b54;
  color: #fff;
  position: sticky;
  top: 0;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

i.material-icons {
  position: relative;
  top: 4.5px;
  padding: 2px;
  padding-right: 6px;
}


/* only to simulate scrolling */
#tri>div~div {
  padding-bottom: 2000px;
}
<section id="navbar">
  <a class="active">Home</a>
  <a href="./pglist">Site Map</a>
  <a href="./faq">FAQ</a>
  <a href="./article/home">Article</a>
</section>

<section id="main-home">
  <div id="tri">
    <div>
      <h1>ARTICLE</h1>
      <p>Interesting articles by Dustin Ivander</p>
    </div>
    <div style="text-align:right;">
      <a href="./article/home">
        <h3>Go to ARTICLE<i class="material-icons">arrow_forward_ios</i></h3>
      </a>
    </div>
  </div>
</section>

css html
3 Answers

Use a negative z-index on i.material-icons

#navbar {
  overflow: hidden;
  background-color: #151b54;
  color: #fff;
  position: sticky;
  top: 0;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

i.material-icons {
  position: relative;
  top: 4.5px;
  padding: 2px;
  padding-right: 6px;
  z-index: -1;
}


/* only to simulate scrolling */
#tri>div~div {
  padding-bottom: 2000px;
}
<section id="navbar">
  <a class="active">Home</a>
  <a href="./pglist">Site Map</a>
  <a href="./faq">FAQ</a>
  <a href="./article/home">Article</a>
</section>

<section id="main-home">
  <div id="tri">
    <div>
      <h1>ARTICLE</h1>
      <p>Interesting articles by Dustin Ivander</p>
    </div>
    <div style="text-align:right;">
      <a href="./article/home">
        <h3>Go to ARTICLE<i class="material-icons">arrow_forward_ios</i></h3>
      </a>
    </div>
  </div>
</section>

Kameron0

You can include z-index for the icon, and make its position to be relative. The higher the number of z-index, the higher the object will be placed on z-axis.

For instance, an icon with z-index:2 will be placed on top of another icon with z-index:1. Make sure to position the element in order for z-index to function. [You may refer to this image for better illustration]
1

Mei Kei0

What you should do is add z-index:-1 to your style sheet for anything that you want to stay on top.

i.material-icons {
  position: relative;
  top: 4.5px;
  padding: 2px;
  padding-right: 6px;
  z-index: -1;
}
Logan Latham0
Related