how to hide bootstrap css hover/activate color after scrolling down

user_7984318 0
Viewed 34

I have a bootstrap html code:

<nav>
  <ul>
    <li><a>1</a></li>
    <li class="active"><a href="#">2</a></li>
    <li><a>3</a></li>
  </ul>
</nav>
<footer>
back to top
</footer>

enter image description here

enter image description here

As it displays in the image ,the activate 2 will cover part of the footer if I scroll down the mouse,my question is ,how to make it hidden inside the footer just like other elements, when I scroll down the mouse ?

bootstrap-4 css html
2 Answers

You'll want to check the css z-index of both elements. The footer z-index should be higher than the menu element's.

user_5129220

You need to increase the z-index for the footer element.

CSS z-index property

example:

div {
  position: relative;
  width: 100px;
  height: 100px;
}

.first-div {
  background: red;
  
  /* change this z-index value */
  z-index: 2;
}

.other-div {
  position: absolute;
  background: lime;
  top: 60px;
  left: 60px;
  
  /* change this z-index value */
  z-index: 1;
}
<div class="first-div">
  <span>first div</span>
</div>

<div class="other-div">
  <span>other div</span>
</div>

user_89292530
Related