z-index not working on iPad - ios

Question

The z-index for my #navContainer works fine on desktop, but not on iPad, any solutions?
Here's a link to my project http://www.lunacarpentry.com/peachietouch/index.html
Below is the code for my #navContainer
width: 27%;
position: absolute;
z-index: 10;
top: 4.5em;
left: 36.55%;
padding-bottom: 14em;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;

Answer 1

It might be the way the iPad's Safari is processing z-index. To explain it simply, z-index doesn't work as simply as most web developers would assume it does.
Most web devs never do read into the documentation of z-index because it's a strait forward concept and because of this they eventually find themselves in this position. You'll be able to read more about that here
As far as a solution to wanting strait forward stacking of elements, if you're willing to use it then I'd suggest you keep the stacking order to the transforms. You'll be able to do that for the iPad specifically with this:
-webkit-transform:translateZ(10px);

Answer 2

I found the solution, I added a negative z-index value to the element that was overlapping my #navContainer
HTML
<div id='navContainer'>
<img id='logo' src='img/peachie-touch-logo-min.png' alt='peachie touch logo'/>
<ul>
<li id='home-button' value='home'><a href='#home'>Home</a></li>
<li id='about-button' value='about'><a href='#about'>About Us</a></li>
<li id='services-button' value='services'><a href='#services'>Services</a></li>
<li id='contact-button' value='contact'><a href='#contact'>Contact</a></li>
</ul>
<div id='navFooter'>
<p class='tradeMark'>Peachie Touch ©</p>
<ul>
<li><a href='#'>
<div id='facebookIcon'></div>
</a>
</li>
<li><a href='#'>
<div id='instagramIcon'></div>
</a>
</li>
<li><a href='#'>
<div id='pininterestIcon'></div>
</a>
</li>
</ul>
</div>
</div>
<div id='wrapper'>
<div id='about' class='content'></div>
<div id='services' class='content'></div>
<div id='contact' class='content'></div>
<div id='home' class='content'></div>
<div id='currentPageContent' class='contentFromCurrentPage'></div>
</div>
CSS
#navContainer {
width: 27%;
position: absolute;
z-index: 10;
top: 4.5em;
left: 36.55%;
padding-bottom: 14em;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out; }
#wrapper {
width:100%;
height: 0;
overflow-x: hidden;
z-index: -10;
position: absolute;
margin: 7em 0 0;
background-color: #fff;
transition: all 0.5s ease-in-out;
opacity: .9;
-webkit-box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.12);
-moz-box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.12);
box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.12);
}