CSS - Z-индексът не работи с относителни и абсолютни позиции - html, css, html5, css3, z-index

Направих падащо меню с чист css3, но единproperty (z-index) не работи, както очаквах, и това е много голям проблем, тъй като падащото меню се изпуска над менюто. В идеалния случай той трябва да бъде отпаднат под менюто. Опитах се да направя нещо с този проблем цял ден, но за съжаление не мога да го разбера, затова сега искам помощ ... Аз направих различен фон - цветове за проблемни предмети, за да виждам добре какво се опитвам да постигна. Основната цел е подменюто с червен фон да бъде под синия фон.
Послепис Аз вече се опитах да направя това меню с jQuery slideDown / slideUp свойства, но те не изглеждат като идеален слайд ефект (както в моя пример). Те изглеждат по-скоро като стречинг и това не е това, което искам ..

ПРИМЕР В JSFIDDLE

ul {
list-style-type: none;
}
.menu_wrapper {
position: relative;
z-index: 999;
/* IS NOT WORKING... O_o...*/
height: 70px;
width: 600px;
background-color: blue;
}
.menu li {
display: inline;
float: left;
display: table;
height: inherit;
margin: 3px;
margin-top: 10px;
}
.menu li a {
display: table-cell;
font-family: Verdana;
font-size: 16px;
color: gold;
text-align: center;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
background: #05487F;
transition: .2s ease-in-out;
}
.sub-menu {
position: absolute;
z-index: 1;
/* IS NOT WORKING... O_o...*/
margin-top: -200px;
margin-left: -132px;
padding: 15px;
padding-top: 20px;
background-color: red;
transition: all 1s ease-in-out;
}
.sub-menu li {
float: none;
}
.sub-menu li a {
padding: 5px 15px;
}
.menu li a:hover + .sub-menu {
margin-top: 40px;
}
.sub-menu:hover {
margin-top: 40px;
}

<nav class="menu_wrapper">
<ul class="menu">
<li><a href="about/index.html">About</a>
</li>
<li><a href="news/index.html">News</a>
</li>
<li>
<a href="">PROBLEM HERE<br>(HOVER THIS)</a>
<ul class="sub-menu">
<li><a href="">link 1</a>
</li>
<li><a href="">link 2</a>
</li>
<li><a href="">link 3</a>
</li>
</ul>
</li>
<li><a href="">Something</a>
</li>
<li><a href="">Contacts</a>
</li>
</ul>
</nav>

Отговори:

Проблемът е, че си създаване на контекст на натрупване за .menu_wrapper когато сте настроили z-index: 999, Когато се създаде контекст на подреждане, вие не мога позициониране на потомствен елемент зад предшественик.

Премахване z-index: 999 от .menu_wrapper:

.menu_wrapper {
position: relative;
/* z-index: 999; << remove */
height: 70px;
width: 600px;
background-color: blue;
}

След това променете z-index за .sub-menu от 1 до отрицателно число като -1:

Актуализиран пример

.sub-menu {
position: absolute;
z-index: -1;
margin-top: -200px;
margin-left: -132px;
padding: 15px;
padding-top: 20px;
background-color: red;
transition: all 1s ease-in-out;
}

Ето сделката с z-index.

Z-индексът е относим към неговия родител (и в крайна сметкапо отношение на обекта Window) в нормалния поток DOM. Въпреки това, абсолютно позиционираните обекти се премахват от нормалния поток на DOM и затова Z-Index е относително сам по себе си - вместо обекта Window.

В теб не сте задали позиция за вашето родителско меню, така че ще бъде автоматично зададен position:static който не може да бъде z-индексиран.

Добавянето на следното към родителското меню трябва да ви позволи да z-индексирате подменюто, за да останете над него.

position:relative;
z-index:1;

Проблемът е, че си създаване на контекст на натрупване за .menu_wrapper когато сте настроили z-index: 999, Когато се създаде контекст на подреждане, вие не мога позициониране на потомствен елемент зад предшественик.

Премахване z-index: 999 от .menu_wrapper:

.menu_wrapper {
position: relative;
/* z-index: 999; << remove */
height: 70px;
width: 600px;
background-color: blue;
}

След това променете z-index за .sub-menu от 1 до отрицателно число като -1:

Актуализиран пример

.sub-menu {
position: absolute;
z-index: -1;
margin-top: -200px;
margin-left: -132px;
padding: 15px;
padding-top: 20px;
background-color: red;
transition: all 1s ease-in-out;
}

Ето сделката с z-index.

Z-индексът е относим към неговия родител (и в крайна сметкапо отношение на обекта Window) в нормалния поток DOM. Въпреки това, абсолютно позиционираните обекти се премахват от нормалния поток на DOM и затова Z-Index е относително сам по себе си - вместо обекта Window.

В теб не сте задали позиция за вашето родителско меню, така че ще бъде автоматично зададен position:static който не може да бъде z-индексиран.

Добавянето на следното към родителското меню трябва да ви позволи да z-индексирате подменюто, за да останете над него.

position:relative;
z-index:1;