奇妙なz-インデックスの問題、浮動リストの項目が上記の見出しに表示されない

Question

これは私が前に遭遇したことのないz-インデックスを持っていることが非常に興味深い問題です。私が先に進んであなたの最初の考えに答えてみましょう。私はすでにZインデックスを持っている各要素に必要なポジションを設定しました。それはそうではありません。私は可能な限り物事を並べ替えることを試みましたが、基本的には2つの固定要素があります.1つはウェブサイトの見出しのテキストで、次はdivです。ナビゲーション項目の順序付けられていないリストが含まれています（それぞれ、 。私の人生のために

Here's the location of the problem (make sure you're viewing at a width larger than 1000px).

、私は正確に最初の2つのナビゲーション項目（「ホーム」と「概要」）は、実際に完全にマウスオーバーしていない理由を正確に特定することができていませんでした。彼らのマウスオーバー機能は、上の見出しのディケンダーによって切り取られているようです。

私は問題のjsFiddleを作成しましたが、実際には問題を指摘していましたが、jsFiddleではこれを知るためのカスタムフォントを使用しています。ブラウザ固有の問題ではなく、IE固有の問題です。申し訳ありませんが、私はそうでなければ助けにはなりませんが、Firebugはあなたの友人だと思います。

私はそれはFirebugの中で鑑賞するよりも簡単かもしれないと見て、しかしこのHTML/CSSコードを掲載します

...

HTML：

<div id="header"> 
    <h1 id="logo"><a href="#">Page Title</a></h1> 
    <h2 id="tagline"><a href="#">Here's a tagline</a></h2> 
    <div id="nav"> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Portfolio</a></li> 
      <li><a href="#">Resume</a></li> 
      <li><a href="#">Blog</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
</div> 

CSS：

#logo, #tagline { font-weight: normal; font-family: 'Pacifico', cursive; font-size: 60px; display: inline; margin-right: 20px; position: relative; z-index: 4; } 
#logo a, #tagline a { color: #FFF; text-shadow: 2px 2px 0px #f7be82; -webkit-text-shadow: 2px 2px 0px #f7be82; -moz-text-shadow: 2px 2px 0px #f7be82; -o-text-shadow: 2px 2px 0px #f7be82; } 
#logo a:hover, #tagline a:hover { color: #FFF; } 
#tagline { font-size: 18px; } 
#tagline a { text-shadow: 1px 1px 0px #f7be82; -webkit-text-shadow: 1px 1px 0px #f7be82; -moz-text-shadow: 1px 1px 0px #f7be82; -o-text-shadow: 1px 1px 0px #f7be82; } 

.pageTitle { text-align: center; font-size: 48px; } 

#header { 
    position: fixed; 
    z-index: 3; 
    width: 960px; 
    background: #9cddc8; 
} 

#nav { 
    position: fixed; 
    z-index: 2; 
    width: 100%; 
    height: 50px; 
    top: 81px; 
    left: 0px; 
    background: #f7be82; 
    border-bottom: 2px solid #efb87e; 
} 

#nav ul { width: 900px; display: block; margin: 0 auto; overflow: hidden; } 

#nav ul li { 
    position: relative; 
    z-index: 5; 
    float: left; 
    line-height: 50px; 
    width: 16.66%; 
    line-height: 45px; 
    text-align: center; 
} 

#nav ul li a { 
    font-family: 'Pacifico', cursive; 
    font-size: 24px; 
    color: #FFF; 
    text-shadow: 1px 1px 0px #9cddc8; -webkit-text-shadow: 1px 1px 0px #9cddc8; -moz-text-shadow: 1px 1px 0px #9cddc8; -o-text-shadow: 1px 1px 0px #9cddc8; 
} 

I問題のお手伝いをありがとう、ありがとう！

Answer 1

したがって、#logoは#nav上方あろうが#logo 4のz-indexを有し、#navが2のz-indexを有するので、最初の2つの項目がカットオフされます。

これらの要素が異なるstack context#logoよりにあるよう#nav内li子孫は5のz-indexを持っていることは重要ではありません。

あなたは上記オレンジ色のバーロゴを必要とするので、あなたの背景を設定して、まだあなたがあなたのnav要素の下にロゴを必要とする方法を再考する必要があります。

Answer 2

#navにz-indexは必要ありません。 #navのulにposition: relativeとz-index: 10（任意のインデックス> 4が適用されます）を適用してください。

#nav { 
    position: fixed; 
    width: 100%; 
    height: 50px; 
    top: 81px; 
    left: 0px; 
    background: #F7BE82; 
    border-bottom: 2px solid #EFB87E; 
} 

#nav ul { 
    width: 900px; 
    display: block; 
    margin: 0 auto; 
    overflow: hidden; 
    position: relative; 
    z-index: 10; 
} 

これは、ロゴをオレンジ色のストライプの上に保ち、メニュー項目をロゴの上に置き、ホバーを適切に動作させます。

Answer 3

#logo, #tagline { font-weight: normal; font-family: 'Pacifico', cursive; font-size: 60px; display: inline; margin-right: 20px; position: relative; <h1>z-index: 4</h1>; } 

.... 
.... 
.... 


#nav { 
    position: fixed; 
    z-index: 2; 
    width: 100%; 
    height: 50px; 
    top: 81px; 
    left: 0px; 
    background: #f7be82; 
    border-bottom: 2px solid #efb87e; 
} 

... 
... 
... 

あなたがロゴのzインデックスは4、その後のnav 1が2であるされていることを確認し、tahtはロゴが ABOVE NAVを設置することを意味し、わずか4にNAVのZインデックスを変更し、ロゴのNAVのfixed`、以来：これは