I am having trouble with z-index at the moment. Using some of the answers above has progressed the issue but has not solved it yet.
My Over div has a relative position and z-index of 99999 My under div has a fixed position and z-index of 0.
I tried what was mentioned in this thread and changed my under div to a relative position, however while this hides the div intially, when I click a button to slide the Over div to the right to reveal the under div, it is not there, it is at the bottom of the page under the footer.
I am copying an example put online, and in the sample online it works with the relative and fixed positions. Its the FB style menu. Slide your content to the right to reveal your menu. i believe thats why its fixed, rather than relative.
I was hoping someone could advise why this works in the example as everyone above noted that z-index works within a context.
Online Example http://media02.hongkiat.com/mobile-navi-with-jquery/demo/index.html
EDIT: Adding sample code.
HTML Markup:
<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%; }
My code is not the exact same but its similar. I just want to understand why z-index works in this example with 2 different positions set, relative and fixed, as that is what I need to achieve.
