我目前在使用 z-index 时遇到问题。使用上面的一些答案已经解决了这个问题，但还没有解决。
我的 Over div 的相对位置和 z-index 为 99999 我的 under div 有一个固定的位置和 z-index 为 0。
我尝试了该线程中提到的内容并将我的下 div 更改为相对位置，但是虽然这最初隐藏了 div，但当我单击按钮将 Over div 向右滑动以显示下 div 时，它不存在，它位于页脚下方的页面底部。
我正在复制一个在线示例，并且在在线示例中它适用于相对位置和固定位置。它的FB风格菜单。向右滑动您的内容以显示您的菜单。我相信这就是为什么它是固定的，而不是相对的。
我希望有人能指出为什么这在示例中有效，因为上面的每个人都指出 z-index 在上下文中有效。
在线示例http://media02.hongkiat.com/mobile-navi-with-jquery/demo/index.html
编辑：添加示例代码。
HTML 标记：
<div id="w">
<div id="pagebody">
<header id="toolbarnav">
<a href="#navmenu" id="menu-btn"></a>
<h1>HK Mobile</h1>
</header>
<section id="content" class="clearfix">
<h2>Welcome to the Mobile Site!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem sapien, auctor placerat varius sed, aliquam et nibh. Quisque posuere erat nec tortor vestibulum id dignissim quam ornare. Suspendisse sapien ante, pellentesque non interdum ac, feugiat at eros. Morbi lacus augue, blandit ac porta a, rutrum quis tellus. Nam ut velit lorem, sit amet placerat lorem.</p>
<img src="img/hongkiat-lim.png" alt="Hongkiat Lim" class="photo">
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam convallis lacinia dapibus. Sed nunc enim, ultrices nec suscipit ac, malesuada pharetra diam. Etiam massa orci, pellentesque nec lacinia eu, vulputate non est. Donec faucibus, tellus eu ultrices lobortis, leo nisl iaculis elit, id dictum arcu massa in nibh. Nulla auctor vehicula rutrum. Vivamus mi mauris, molestie sit amet placerat ac, tempor vitae nisi. Fusce pharetra eleifend aliquam. Cras ultricies orci sit amet ligula tempor pulvinar.</p>
<p>Vivamus consectetur nulla vel neque accumsan bibendum lacinia nibh venenatis. Morbi placerat tempor nunc, eu congue metus pellentesque vitae.</p>
<p>Maecenas lacinia commodo venenatis. Sed nec mauris sapien. Donec eget justo sapien, id elementum magna. Integer et orci quis urna tempus eleifend eget eu nulla. Quisque interdum porttitor tincidunt. Nulla ornare dolor elit, eu adipiscing felis. Nulla viverra blandit bibendum. Mauris non tellus lacus.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam convallis lacinia dapibus. Sed nunc enim, ultrices nec suscipit ac, malesuada pharetra diam. Etiam massa orci, pellentesque nec lacinia eu, vulputate non est. Donec faucibus, tellus eu ultrices lobortis, leo nisl iaculis elit, id dictum arcu massa in nibh.</p>
<p>Nulla auctor vehicula rutrum. Vivamus mi mauris, molestie sit amet placerat ac, tempor vitae nisi. Fusce pharetra eleifend aliquam. Cras ultricies orci sit amet ligula tempor pulvinar. Vivamus consectetur nulla vel neque accumsan bibendum lacinia nibh venenatis. Morbi placerat tempor nunc, eu congue metus pellentesque vitae.</p>
<p>Maecenas lacinia commodo venenatis. Sed nec mauris sapien. Donec eget justo sapien, id elementum magna. Integer et orci quis urna tempus eleifend eget eu nulla. Quisque interdum porttitor tincidunt. Nulla ornare dolor elit, eu adipiscing felis. Nulla viverra blandit bibendum. Mauris non tellus lacus.</p>
<p><center><img src="img/pencilman.jpg" alt="pencilmannn"></center></p>
</section>
</div>
<div id="navmenu">
<header>
<h1>Menu Links</h1>
</header>
<ul>
<li><a href="#homepage.html" class="navlink">Home</a></li>
<li><a href="#about.html" class="navlink">About Us</a></li>
<li><a href="#advertise.html" class="navlink">Advertise</a></li>
<li><a href="#write.html" class="navlink">Write for Us</a></li>
<li><a href="#contacts.html" class="navlink">Contacts</a></li>
<li><a href="#privacy.html" class="navlink">Privacy Policy</a></li>
</ul>
</div>
</div>
CSS：
body { background: #181c1f; font-family: "Trebuchet MS", Arial, Tahoma, sans-serif; font-size: 62.5%; line-height: 1; }
a { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; }
img { border: 0; }
img.photo { padding: 2px; background: #888; border: 1px solid #cecece; border-bottom-color: #aaa; border-right-color: #aaa; float: right; margin-left: 20px; margin-right: 11px; }
ul,ol,h1,h2,h3,h4,h5,h6,p { display: block; }
#w { position: relative; overflow-x: hidden; overflow-y: hidden; }
/** @group core body **/
#w #pagebody { position: relative; left: 0; max-width: 640px; min-width: 320px; z-index: 99999; }
#w #navmenu { background: #475566; height: 100%; display: block; position: fixed; width: 300px; left: 0px; top: 0px; z-index: 0; }
/** @group header **/
#w #pagebody header#toolbarnav { display: block; position: fixed; left: 0px; top: 0px; z-index: 9999; background: #0b1851 url('img/tabbar-solid-bg.png') top left no-repeat; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; height: 44px; width: 100%; max-width: 640px; }
#w #pagebody header#toolbarnav h1 { text-align: center; padding-top: 10px; padding-right: 40px; color: #e6e8f2; font-weight: bold; font-size: 2.1em; text-shadow: 1px 1px 0px #313131; }
#w #pagebody header #menu-btn { display: block; float: left; width: 53px; height: 30px; background: url('img/nav-btn.png') no-repeat; margin-top: 6px; margin-left: 8px;}
#w #pagebody #content { display: block; background: #fff; padding: 5px 12px; margin-top: 40px; min-height: 550px; height: 100%; z-index: 9999; }
#w #pagebody #content h2 { border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; color: #181818;
font-family: "Droid Serif", Georgia, serif; font-size: 2.6em; line-height: 1.8em; font-weight: 500; margin-top: 25px; margin-bottom: 25px; padding: 12px 0; text-align: center; }
#w #pagebody #content h3 { font-family: "Calibri", Verdana, Arial, sans-serif; font-weight: 700; font-size: 1.8em; line-height: 1.75em; text-transform: capitalize; margin-bottom: 5px; color: #222; }
#w #pagebody #content p { font-size: 1.4em; line-height: 1.6em; margin-bottom: 15px; color: #444; }
#w #pagebody #content a { color: #78a5ce; }
#w #pagebody #content a:hover { color: #678eb2; }
/** @group nav menu **/
#w #navmenu header { display: block; background: #303a44; height: 44px; }
#w #navmenu header h1 { text-align: center; padding-top: 10px; color: #e6e8f2; font-weight: bold; font-size: 2.1em; text-shadow: 1px 1px 0px #313131; }
#w #navmenu ul { list-style: none; background: #475566; height: 100%; }
#w #navmenu ul li { display: block; }
#w #navmenu ul li a { position: relative; display: block; border-bottom: 1px solid #303c4a; padding: 14px 11px; font-weight: bold; color: #f0f0f0; text-shadow: -1px -1px 1px #222; font-size: 1.6em; text-decoration: none; }
#w #navmenu ul li a:hover { color: #cad0e6; text-decoration: none; }
#w #navmenu ul li a::after {
content: '';
display: block;
width: 6px;
height: 6px;
border-right: 3px solid #d0d0d8;
border-top: 3px solid #d0d0d8;
position: absolute;
right: 30px;
top: 45%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#w #navmenu ul li a:hover::after { border-color: #cad0e6; }
/** @group misc **/
.blue { color: #1c609f !important; font-weight: bold; }
/** @group clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
我的代码不完全相同，但相似。我只是想了解为什么 z-index 在这个示例中工作，设置了 2 个不同的位置，相对位置和固定位置，因为这是我需要实现的。