Z-インデックスが正常に動作しない

Question

私は、ページ内容をスクロールさせたい#mobile-headerの中に2つのナビゲータを持っています。私はそれを働かせることはできません。ここで

はJS Fiddle for the sample code

であり、ここでコード

<div id="mobile-header"> 
    <div class="top-header"></div> 
    <div class="navbar-inverse"></div> 
</div> 
<div id="page-wrap"></div> 

とCSS

.top-header { 
    width: 800px; 
    height: 50px; 
    background: blue; 
} 

.navbar-inverse { 
    width: 800px; 
    height: 100px; 
    background: green; 
} 

#mobile-header { 
    z-index: 10; 
    position: fixed; 
    left: 0; 
    right: 0; 
    top: 0; 
    border: 5px solid yellow; 
} 

#page-wrap { 
    z-index: 1; 
    position: relative; 
    height: 1500px; 
    width: 800px; 
    background: red; 
} 

誰が

Answer 1

はこれをチェックしてくださいすることができます。 CSSの一部を修正しました。

.top-header { 
 
    width: 800px; 
 
    height: 50px; 
 
    background: blue; 
 
} 
 

 
.navbar-inverse { 
 
    width: 800px; 
 
    height: 100px; 
 
    background: green; 
 
} 
 

 
#mobile-header { 
 
    z-index: 9999; 
 
    position: fixed; 
 
    left: 0 right:0 top:0; 
 
    border: 5px solid yellow; 
 
    top: 0px; 
 
} 
 

 
#page-wrap { 
 
    z-index: 9; 
 
    position: relative; 
 
    height: 1500px; 
 
    width: 800px; 
 
    background: red; 
 
    margin-top: 160px; 
 
}

<div id="mobile-header"> 
 
    <div class="top-header"></div> 
 
    <div class="navbar-inverse"></div> 
 
</div> 
 
<div id="page-wrap"></div>

これはあなたのために有用であると思います。

ありがとうございました。