CSSサブメニューのZインデックスに問題があります。メインメニューの背後に表示する

Question

私は、ドロップダウンサブメニュー付きの定型化されたメニューを望むクライアントを持っていますが、サブメニューをメインメニューの上に表示することはできません。

私はこれが以前に対処されていることを知っており、私は役に立たない多くの解決策を試しました。私はすべてのz-indexを論理的に設定し、サブメニューのz-indexを-1に設定しようとしましたが、無駄です。

以下は私のコードページです。どんな助けも素晴らしいだろう。 （使用しているようrotateなど）transform

https://codepen.io/h2onet/pen/ZpLzjb

#header { 
 
    z-index: 1; 
 
} 
 
#header nav { 
 
    display: block; 
 
    z-index: 2; 
 
} 
 
#header nav ul { 
 
    height: 292px; 
 
    background: green; 
 
    position: relative; 
 
    z-index: 3; 
 
} 
 
#header nav ul li { 
 
    display: block; 
 
    position: relative; 
 
    z-index: 4; 
 
} 
 
#header nav ul a { 
 
    color: white; 
 
    text-shadow: 2px 2px 4px #000000; 
 
    z-index: 5; 
 
} 
 
#header nav ul a:hover { 
 
    color: #0ff; 
 
} 
 
#header nav ul ul { 
 
    background: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
    z-index: 6; 
 
} 
 
#header nav ul li ul { 
 
    position: absolute; 
 
    width: 210px; 
 
    left: -999em; 
 
} 
 
#header nav ul li:hover ul { 
 
    left: auto; 
 
    margin: 0; 
 
} 
 
#header nav ul ul li { 
 
    width: 210px; 
 
    background: red; 
 
    text-align: left; 
 
    display: block; 
 
    z-index: 7; 
 
} 
 
#header nav ul ul li a { 
 
    text-decoration: none; 
 
    padding: 7px 3px 5px 23px; 
 
    line-height: 1.5em; 
 
} 
 
#header nav ul ul li a:hover { 
 
    background: #5a604f; 
 
    margin: 0; 
 
} 
 
/* BELOW IS CSS TO ABSOLUTELY POSITION LINKS PER CLIENTS SPECS */ 
 

 
#header nav ul li.primary:nth-of-type(1) { 
 
    position: absolute; 
 
    top: 180px; 
 
    left: 70px; 
 
    -ms-transform: rotate(-2deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: rotate(-2deg); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotate(-2deg); 
 
} 
 
#header nav ul li.primary:nth-of-type(2) { 
 
    position: absolute; 
 
    top: 185px; 
 
    left: 150px; 
 
    -ms-transform: rotate(0deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: rotate(0deg); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotate(0deg); 
 
} 
 
#header nav ul li.primary:nth-of-type(2) a { 
 
    font-size: 55%; 
 
} 
 
#header nav ul li.primary:nth-of-type(3) { 
 
    position: absolute; 
 
    top: 183px; 
 
    left: 235px; 
 
    -ms-transform: rotate(1deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: rotate(1deg); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotate(1deg); 
 
} 
 
#header nav ul li.primary:nth-of-type(3) a { 
 
    font-size: 85%; 
 
} 
 
#header nav ul li.primary:nth-of-type(4) { 
 
    position: absolute; 
 
    top: 165px; 
 
    left: 360px; 
 
    -ms-transform: rotate(-9deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: rotate(-9deg); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotate(-9deg); 
 
} 
 
#header nav ul li.primary:nth-of-type(5) { 
 
    position: absolute; 
 
    top: 215px; 
 
    left: 40px; 
 
    width: 120px; 
 
    -ms-transform: rotate(0deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: rotate(0deg); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotate(0deg); 
 
} 
 
#header nav ul li.primary:nth-of-type(5) a { 
 
    font-size: 55%; 
 
    word-spacing: 9999999px; 
 
} 
 
#header nav ul li.primary:nth-of-type(6) { 
 
    position: absolute; 
 
    top: 220px; 
 
    left: 160px; 
 
    -ms-transform: rotate(-2deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: rotate(-2deg); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotate(-2deg); 
 
} 
 
#header nav ul li.primary:nth-of-type(6) a { 
 
    font-size: 80%; 
 
} 
 
#header nav ul li.primary:nth-of-type(7) { 
 
    position: absolute; 
 
    top: 230px; 
 
    left: 290px; 
 
    -ms-transform: rotate(-3deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: rotate(-3deg); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotate(-3deg); 
 
} 
 
#header nav ul li.primary:nth-of-type(7) a { 
 
    font-size: 65%; 
 
} 
 
#header nav ul li.primary:nth-of-type(8) { 
 
    position: absolute; 
 
    top: 240px; 
 
    left: 350px; 
 
    -ms-transform: rotate(-3deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: rotate(-3deg); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotate(-3deg); 
 
} 
 
#header nav ul li.primary:nth-of-type(8) a { 
 
    font-size: 60%; 
 
} 
 
#header nav ul li.primary:nth-of-type(9) { 
 
    position: absolute; 
 
    top: 210px; 
 
    left: 460px; 
 
    -ms-transform: rotate(-1deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: rotate(-1deg); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotate(-1deg); 
 
} 
 
#header nav ul li.primary:nth-of-type(9) a { 
 
    font-size: 60%; 
 
} 
 
#header nav ul li.primary:nth-of-type(10) { 
 
    position: absolute; 
 
    top: 205px; 
 
    left: 360px; 
 
    -ms-transform: rotate(-4deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: rotate(-4deg); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotate(-4deg); 
 
} 
 
#header nav ul li.primary:nth-of-type(10) a { 
 
    font-size: 65%; 
 
}

<header id="header"> 
 
    <nav> 
 
    <ul> 
 
     <li class="primary"><a href="/">HOME</a> 
 
     </li> 
 
     <li class="primary current"><a href="/" current>LINK 2</a> 
 
     </li> 
 
     <li class="primary"><a href="/">HOVER THIS LINK</a> 
 
     <ul> 
 
      <li><a href="/">SUBLINK 1</a> 
 
      </li> 
 
      <li><a href="/">SUBLINK 2</a> 
 
      </li> 
 
      <li><a href="/">SUBLINK 3</a> 
 
      </li> 
 
      <li><a href="/">SUBLINK 4</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li class="primary"><a href="/">LINK 3</a> 
 
     </li> 
 
     <li class="primary"><a href="/">LINK 4</a> 
 
     </li> 
 
     <li class="primary"><a href="/">LINK 5 OVERLAP</a> 
 
     </li> 
 
     <li class="primary"><a href="/">LINK 6 OVERLAP</a> 
 
     </li> 
 
     <li class="primary"><a href="/">LINK 7</a> 
 
     </li> 
 
     <li class="primary"><a href="/">LINK 8</a> 
 
     </li> 
 
     <li class="primary"><a href="/">LINK 9</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header>

Answer 1

かなりの数のプロパティ変換のためのビューポートを作成します。これは、変換された要素のすべての子に影響を与えます。position:fixedの要素を含みます。

他のエフェクトに加えて、このビューポートはスタッキングコンテキストを作成します。
これは、子が独自のレンダリングされた場所に正確にレンダリングされる独自のz-indexスペースを持つことを意味します。親の上にレンダリングされた要素は、それらの上にレンダリングされます（たとえば、z-indexを親として持ちますがDOMの後の要素）。

これらを上にレンダリングするには、ホバリングしたときに親のz-indexを変更する必要があります。あなたのケースでは、使用して：

#header nav ul li:hover { 
    z-index: 6; 
}