Почему не работает z-index?

Question

[abramoov]

Вообщем хотел сделать чтобы навигационное меню показывалось при скролле вверх
по итогу получилось так что навигационное меню лежит под всеми другими как будто присваивается z-index: 0
вот html:

<div class="top_bg">
    <div class="container-fluid">
    <div class="row">
                <div class="top_right">
                    <ul>
                        <li><a href="#">ПОМОЩЬ</a></li>|
                        <li><a href="contact.html">КОНТАКТЫ</a></li>|
                        <li><a href="#">ДОСТАВКА И ОПЛАТА</a></li>
                    </ul>
                </div>
                <div class="top_left">
                    <h2><span></span> Мы всегда на связи: +7 --- --- -- --</h2>
                </div>
        </div>
    </div>
    </div>

вот js:

$(document).ready(function() {

	var top_menu = $(".top_menu"); // Меню
	var scrollPrev = 0 // Предыдущее значение скролла

	$(window).scroll(function() {
		var scrolled = $(window).scrollTop(); // Высота скролла в px
		var firstScrollUp = false; // Параметр начала сколла вверх
		var firstScrollDown = false; // Параметр начала сколла вниз

		// Если скроллим
		if ( scrolled > 0 ) {
			// Если текущее значение скролла > предыдущего, т.е. скроллим вниз
			if ( scrolled > scrollPrev ) {
				firstScrollUp = false; // Обнуляем параметр начала скролла вверх
				// Если меню видно
				if ( scrolled < top_menu.height() + top_menu.offset().top ) {
					// Если только начали скроллить вниз
					if ( firstScrollDown === false ) {
						var topPosition = top_menu.offset().top; // Фиксируем текущую позицию меню
						top_menu.css({
							"top": topPosition + "px"
						});
						firstScrollDown = true;
					}
					// Позиционируем меню абсолютно
					top_menu.css({
						"position": "absolute"
					});
				// Если меню НЕ видно
				} else {
					// Позиционируем меню фиксированно вне экрана
					top_menu.css({
						"position": "fixed",
						"top": "-" + top_menu.height() + "px"
					});
				}

			// Если текущее значение скролла < предыдущего, т.е. скроллим вверх
			} else {
				firstScrollDown = false; // Обнуляем параметр начала скролла вниз
				// Если меню не видно
				if ( scrolled > top_menu.offset().top ) {
					// Если только начали скроллить вверх
					if ( firstScrollUp === false ) {
						var topPosition = top_menu.offset().top; // Фиксируем текущую позицию меню
						top_menu.css({
							"top": topPosition + "px"
						});
						firstScrollUp = true;
					}
					// Позиционируем меню абсолютно
					top_menu.css({
						"position": "absolute"
					});
				} else {
					// Убираем все стили
					top_menu.removeAttr("style");
				}
			}
			// Присваеваем текущее значение скролла предыдущему
			scrollPrev = scrolled;
		}
	});
});

вот css:

.top_menu{
	background: #222;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 999;
}

Answer 1

[abramoov]

Решил вопрос , убрал этот див в самый низ html, но вопрос почему не сработал z-index остался

Comments

[Сергей delphinpro]

потому что контекст наложения.

<header>
  <nav></nav>
</header>
<main>
</main>

header { z-index: 10; }
nav { z-index: 100000; }
main { z-index: 20; }

nav лежит внутри header, z-index которого меньше чем у main, поэтому весь блок header со всем содержимым будет под блоком main.