Fade In jquery изображение перекрывает мой фиксированный заголовок

Это jquery 

<script type="text/javascript">
    $(document).ready(function () {
        $('#showhidetarget').hide();

        $('a#showhidetrigger').click(function () {
            $('#showhidetarget').toggle(150);
        });
    });
</script>

Это мой липкий заголовок nav CSS

#nav {
    background-color: #001f22;
    height: 30px;
    width: 100%;
    position: fixed;
    list-style-type: none;
    margin-top: 0px;
    margin-bottom: 0;
    float: left;
    margin-right: auto;
    margin-left: auto;

Nav Html 

  <div id="nav"><ul>
         <li><a href="#home">HOME</a></li>
         <li><a href="#about">ABOUT</a></li>
         <li><a href="#portfolio">PORTFOLIO</a></li>
         <li><a href="#contact">CONTACT</a></li>
  </ul>
  </div>

Fade-in CSS 

.fade {
   opacity: 0.5;
   transition: opacity .50s ease-in;
   -moz-transition: opacity .50s ease-in;
   -webkit-transition: opacity .50s ease-in;
   }

   .fade:hover {
    opacity: 1;
      }

   .fade:visited {
    opacity: 1;

      }

Таким образом, в основном, мои изображения fade-in/fade-out jquery перекрываются / идут впереди фиксированной навигационной панели. Как мне исправить это, чтобы оно не перекрывалось?

2 3
css jquery overlapping

2 ответа:

Дайте навигационной панели z-индекс, а также объектам fadeIn.

Убедитесь, что панель навигации имеет более высокий z-индекс, например exmaple.

.fade {
   opacity: 0.5;
   transition: opacity .50s ease-in;
   -moz-transition: opacity .50s ease-in;
   -webkit-transition: opacity .50s ease-in;
   z-index: 10;
   }

#nav {
    background-color: #001f22;
    height: 30px;
    width: 100%;
    position: fixed;
    list-style-type: none;
    margin-top: 0px;
    margin-bottom: 0;
    float: left;
    margin-right: auto;
    margin-left: auto;
    z-index: 20;
}
2

Вы сейчас о css-свойстве "z-index"? Z-индексные регуляторы, элемент которых будет показан сверху. Элемент с большим z-индексом будет перекрывать элемент с меньшим z-индексом.

Поэтому установите z-индекс для заголовка, например, в 999:

#nav {
    z-index: 999;
}

И z-индекс для изображений к чему-то ниже.

Надеюсь, это поможет.
1