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 >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 >arrow_forward_ios</i></h3>
</a>
</div>
</div>
</section>
CodePudding user response:
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 >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 >arrow_forward_ios</i></h3>
</a>
</div>
</div>
</section>
CodePudding user response:
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
CodePudding user response:
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;
}