z-index不是絕對的

Question

我希望新來的孩子總是在最頂層（z-索引：9999），但我不能讓它工作。 我對絕對和相對階級感到困惑......我已經嘗試了幾個小時，仍然無法使其工作......需要幫助。

 /* parent menu */ ul.menu { list-style: none; padding: 0; margin: 0; /*background: #34495e;*/ margin: 50px auto; width: 800px; width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; z-index: 10; position: relative; } ul.menu li { display: block; float: left; background: #34495e; transform: skewX(25deg); } .menu > li > a { transform: skewX(-25deg); padding: 1em 2em; } .menu a { display: block; color: #fff; text-transform: uppercase; text-decoration: none; font-family: Arial, Helvetica; font-size: 14px; } ul.submenu.level_2 { position: absolute; width: auto; left: 0%; transform: skewX(-25deg); transform-origin: left top; padding: 0px; box-shadow: 0 0 10px rgba(0, 0, 0, .9); z-index: 99999; } ul.submenu.level_3 { left: 100%; top: 0; position: absolute; width: auto; transform-origin: left top; padding: 0px; box-shadow: 0 0 10px rgba(0, 0, 0, .9); } ul.submenu.level_4 { left: 100%; top: 0; position: absolute; width: auto; transform-origin: left top; padding: 0px; box-shadow: 0 0 10px rgba(0, 0, 0, .9); } ul.submenu.level_5 { left: 100%; top: 0; position: absolute; width: auto; transform-origin: left top; padding: 0px; box-shadow: 0 0 10px rgba(0, 0, 0, .9); } ul.submenu.level_6 { left: 100%; top: 0; position: absolute; width: auto; transform-origin: left top; padding: 0px; box-shadow: 0 0 10px rgba(0, 0, 0, .9); } ul.submenu.level_2.move-menu { left: -100%; } li.menu-list ul { display: none; } ul.menu li a { display: block; padding: 1em; text-decoration: none; white-space: nowrap; color: #fff; } /* hover effect */ li.menu-list:hover > ul { display: block; /*position: absolute;*/ padding: 0px; } /* parent menu hover effect*/ li.menu-list:hover { background: #ec3939; } li.menu-list:hover a { transform: skewX(-25deg); } /* children menu hover effect*/ li.menu-list:hover li { float: none; transform: skewX(0deg); } li.menu-list:hover li a { float: none; transform: skewX(0deg); } 

 <div class="container hidden-xs"> <ul class="menu"> <li> <a href="http://sedtag.dev/">Home</a> </li> <li class="menu-list"> <a href="category-16-b0-New+Arrivals.html">New Arrivals<b class="caret"></b></a> <ul class="submenu level_2"> <li class="menu-list level_2"> <a href="category-1526-b0-30+Nov+2015.html">30 Nov 2015</a> </li> <li class="menu-list level_2"> <a href="category-1525-b0-28+Nov+2015.html">28 Nov 2015</a> </li> <li class="menu-list level_2"> <a href="category-1521-b0-26+Nov+2015.html">26 Nov 2015</a> </li> <li class="menu-list level_2"> <a href="category-1510-b0-24+Nov+2015.html">24 Nov 2015</a> </li> </ul> </li> <li class="menu-list"> <a href="category-1533-b0-about+us.html">about us</a> </li> <li class="menu-list"> <a href="category-1534-b0-contact.html">contact</a> </li> <li class="menu-list"> <a href="category-11-b0-Restock+Items.html">Restock Items<b class="caret"></b></a> <ul class="submenu level_2"> <li class="menu-list level_2"> <a href="category-1527-b0-30+Nov+2015.html">30 Nov 2015</a> </li> </ul> </li> <li class="menu-list"> <a href="category-5-b0-Ready+Stock.html">Ready Stock<b class="caret"></b></a> <ul class="submenu level_2"> <li class="menu-list level_2"> <a href="category-1165-b0-Baby.html">Baby<b class="caret"></b></a> <ul class="submenu level_3"> <li class="menu-list level_3"> <a href="category-1536-b0-baby+child.html">baby child<b class="caret"></b></a> <ul class="submenu level_4"> <li class="menu-list level_4"> <a href="category-1537-b0-baby+children.html">baby children<b class="caret"></b></a> <ul class="submenu level_5"> <li class="menu-list level_5"> <a href="category-1538-b0-baby+children+2.html">baby children 2<b class="caret"></b></a> <ul class="submenu level_6"> <li class="menu-list level_6"> <a href="category-1539-b0-baby+children+3.html">baby children 3</a> </li> </ul> </li> </ul> </li> <li class="menu-list level_4"> <a href="category-1543-b0-baby+children+clone.html">baby children clone</a> </li> </ul> </li> <li class="menu-list level_3"> <a href="category-1542-b0-baby+child+2.html">baby child 2</a> </li> </ul> </li> <li class="menu-list level_2"> <a href="category-960-b0-Jubah.html">Jubah<b class="caret"></b></a> <ul class="submenu level_3"> <li class="menu-list level_3"> <a href="category-1541-b0-Jubah+child.html">Jubah child</a> </li> </ul> </li> <li class="menu-list level_2"> <a href="category-306-b0-Cheong+Sam.html">Cheong Sam</a> </li> </ul> </li> </ul> </div> 

Answer 1

z-index僅適用於首先處於同一級別的定位元素 - 因此在這種情況下，您需要使懸停的li比非懸停的li更高的z-index：

 /* parent menu */ ul.menu { list-style: none; padding: 0; margin: 0; /*background: #34495e;*/ margin: 50px auto; width: 800px; width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; z-index: 10; position: relative; } ul.menu li { display: block; float: left; background: #34495e; transform: skewX(25deg); } .menu > li > a { transform: skewX(-25deg); padding: 1em 2em; } .menu a { display: block; color: #fff; text-transform: uppercase; text-decoration: none; font-family: Arial, Helvetica; font-size: 14px; } ul.submenu.level_2 { position: absolute; width: auto; left: 0%; transform: skewX(-25deg); transform-origin: left top; padding: 0px; box-shadow: 0 0 10px rgba(0, 0, 0, .9); } ul.submenu.level_3 { left: 100%; top: 0; position: absolute; width: auto; transform-origin: left top; padding: 0px; box-shadow: 0 0 10px rgba(0, 0, 0, .9); } ul.submenu.level_4 { left: 100%; top: 0; position: absolute; width: auto; transform-origin: left top; padding: 0px; box-shadow: 0 0 10px rgba(0, 0, 0, .9); } ul.submenu.level_5 { left: 100%; top: 0; position: absolute; width: auto; transform-origin: left top; padding: 0px; box-shadow: 0 0 10px rgba(0, 0, 0, .9); } ul.submenu.level_6 { left: 100%; top: 0; position: absolute; width: auto; transform-origin: left top; padding: 0px; box-shadow: 0 0 10px rgba(0, 0, 0, .9); } ul.submenu.level_2.move-menu { left: -100%; } li.menu-list ul { display: none; } ul.menu li a { display: block; padding: 1em; text-decoration: none; white-space: nowrap; color: #fff; } /* hover effect */ li.menu-list:hover > ul { display: block; /*position: absolute;*/ padding: 0px; } li.menu-list { position: relative; z-index: 1; } /* parent menu hover effect*/ li.menu-list:hover { background: #ec3939; z-index: 2; } li.menu-list:hover a { transform: skewX(-25deg); } /* children menu hover effect*/ li.menu-list:hover li { float: none; transform: skewX(0deg); } li.menu-list:hover li a { float: none; transform: skewX(0deg); } 

 <div class="container hidden-xs"> <ul class="menu"> <li><a href="http://sedtag.dev/">Home</a> </li> <li class="menu-list"> <a href="category-16-b0-New+Arrivals.html">New Arrivals<b class="caret"></b></a> <ul class="submenu level_2"> <li class="menu-list level_2"> <a href="category-1526-b0-30+Nov+2015.html">30 Nov 2015</a> </li> <li class="menu-list level_2"> <a href="category-1525-b0-28+Nov+2015.html">28 Nov 2015</a> </li> <li class="menu-list level_2"> <a href="category-1521-b0-26+Nov+2015.html">26 Nov 2015</a> </li> <li class="menu-list level_2"> <a href="category-1510-b0-24+Nov+2015.html">24 Nov 2015</a> </li> </ul> </li> <li class="menu-list"> <a href="category-1533-b0-about+us.html">about us</a> </li> <li class="menu-list"> <a href="category-1534-b0-contact.html">contact</a> </li> <li class="menu-list"> <a href="category-11-b0-Restock+Items.html">Restock Items<b class="caret"></b></a> <ul class="submenu level_2"> <li class="menu-list level_2"> <a href="category-1527-b0-30+Nov+2015.html">30 Nov 2015</a> </li> </ul> </li> <li class="menu-list"> <a href="category-5-b0-Ready+Stock.html">Ready Stock<b class="caret"></b></a> <ul class="submenu level_2"> <li class="menu-list level_2"> <a href="category-1165-b0-Baby.html">Baby<b class="caret"></b></a> <ul class="submenu level_3"> <li class="menu-list level_3"> <a href="category-1536-b0-baby+child.html">baby child<b class="caret"></b></a> <ul class="submenu level_4"> <li class="menu-list level_4"> <a href="category-1537-b0-baby+children.html">baby children<b class="caret"></b></a> <ul class="submenu level_5"> <li class="menu-list level_5"> <a href="category-1538-b0-baby+children+2.html">baby children 2<b class="caret"></b></a> <ul class="submenu level_6"> <li class="menu-list level_6"> <a href="category-1539-b0-baby+children+3.html">baby children 3</a> </li> </ul> </li> </ul> </li> <li class="menu-list level_4"> <a href="category-1543-b0-baby+children+clone.html">baby children clone</a> </li> </ul> </li> <li class="menu-list level_3"> <a href="category-1542-b0-baby+child+2.html">baby child 2</a> </li> </ul> </li> <li class="menu-list level_2"> <a href="category-960-b0-Jubah.html">Jubah<b class="caret"></b></a> <ul class="submenu level_3"> <li class="menu-list level_3"> <a href="category-1541-b0-Jubah+child.html">Jubah child</a> </li> </ul> </li> <li class="menu-list level_2"> <a href="category-306-b0-Cheong+Sam.html">Cheong Sam</a> </li> </ul> </li> </ul> </div> 

在上面的代碼片段中，我更改了以下內容：

li.menu-list {
  position: relative;
  z-index: 1;
}
/* parent menu hover effect*/

li.menu-list:hover {
  background: #ec3939;
  z-index: 2;
}

Answer 2

您沒有將position設置為子li元素，這就是z-index不起作用的原因。

更換：

li.menu-list:hover {
    background: #ec3939;
}

同

li.menu-list:hover {
    background: #ec3939;
    z-index: 1;
}

和這個

ul.menu li {
    display: block;
    float: left;
    background: #34495e;
    transform: skewX(25deg);
}

同

ul.menu li {
    display: block;
    float: left;
    background: #34495e;
    transform: skewX(25deg);
    position: relative;
}