/ / CSS - indeks Z nie działa z pozycjami względnymi i absolutnymi - html, css, html5, css3, z-index

CSS - indeks Z nie działa z pozycjami względnymi i bezwzględnymi - html, css, html5, css3, z-index


Zrobiłem menu rozwijane używając czystego css3, ale jednegoWłaściwość (z-index) nie działa tak, jak się spodziewałem i to jest bardzo duży problem, ponieważ lista rozwijana spada z POWYŻSZEGO menu. Idealnie musi zostać upuszczona pod menu. Próbowałem przez cały dzień zrobić coś z tym problemem, ale niestety nie mogę tego zrozumieć, więc teraz proszę o pomoc ... Zrobiłem różne kolory tła dla przedmiotów problematycznych, aby dobrze zobaczyć, do czego próbuję dotrzeć. Głównym celem jest to, że podmenu z czerwonym tłem musi znajdować się pod niebieskim tłem.
P.S. Próbowałem już zrobić to menu za pomocą właściwości slideDown / slideUp jQuery, ale nie wyglądają one jak idealny efekt slajdów (jak w moim przykładzie). Wyglądają bardziej jak rozciąganie, i to nie jest to, czego chcę ...

PRZYKŁAD W 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>

Odpowiedzi:

7 dla odpowiedzi № 1

Problem polega na tym, że ty jesteś ustalanie kontekstu stosowego na .menu_wrapper kiedy ustawisz z-index: 999. Po ustaleniu kontekstu stosu, ty nie może umieść element potomny za przodkiem.

Usunąć z-index: 999 od .menu_wrapper:

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

Następnie zmień z-index na .sub-menu od 1 do liczby ujemnej, takiej jak -1:

Zaktualizowany przykład

.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;
}

2 dla odpowiedzi nr 2

Oto umowa z z-index.

Indeks Z jest względem jego rodzica (i ostateczniewzględem obiektu Window) w normalnym przepływie DOM. Jednak obiekty z pozycją absolutną są usuwane z normalnego przepływu DOM, a zatem indeks Z jest względny względem samego siebie - a nie obiektu Window.

W twoim przypadku nie ustawiłeś pozycji dla menu nadrzędnego, więc zostanie ono automatycznie przypisane position:static które NIE mogą być zindeksowane.

Dodanie następujących elementów do menu nadrzędnego powinno umożliwić z-indeksowanie podmenu, aby pozostawał nad nim.

position:relative;
z-index:1;

7 dla odpowiedzi nr 3

Problem polega na tym, że ty jesteś ustalanie kontekstu stosowego na .menu_wrapper kiedy ustawisz z-index: 999. Po ustaleniu kontekstu stosu, ty nie może umieść element potomny za przodkiem.

Usunąć z-index: 999 od .menu_wrapper:

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

Następnie zmień z-index na .sub-menu od 1 do liczby ujemnej, takiej jak -1:

Zaktualizowany przykład

.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;
}

2 dla odpowiedzi № 4

Oto umowa z z-index.

Indeks Z jest względem jego rodzica (i ostateczniewzględem obiektu Window) w normalnym przepływie DOM. Jednak obiekty z pozycją absolutną są usuwane z normalnego przepływu DOM, a zatem indeks Z jest względny względem samego siebie - a nie obiektu Window.

W twoim przypadku nie ustawiłeś pozycji dla menu nadrzędnego, więc zostanie ono automatycznie przypisane position:static które NIE mogą być zindeksowane.

Dodanie następujących elementów do menu nadrzędnego powinno umożliwić z-indeksowanie podmenu, aby pozostawał nad nim.

position:relative;
z-index:1;