Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Danny Luna
Danny Luna
5,899 Points

z-index not working on iPad

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;
Marcus Parsons
Marcus Parsons
15,719 Points

Hey Danny,

That link leads to a 404 file not found error. And I looked on your main site and could not find any reference at all to a #navContainer element nor any relevant CSS for that id. I couldn't find any of the CSS you listed in the main site either.

1 Answer

Codin - Codesmite
Codin - Codesmite
8,600 Points

I have had endlesss drama with iOS and z-index in the past, from my experiences I found that positioning elements have a huge effect on if iOS renders z-index correctly.

  1. I found having no position element just caused z-index to not render at all correctly.
  2. I found that relative positioning seemed to be supported a lot better with z-index elements on iOS.
  3. Overlaying elements with opacity less then 100% caused problems on iOS.
  4. Had a lot of problems with z-index and scrolling the page not rendering correctly on iOS the solution was rather strange but adding "transform: translate3d(0,0,0)" resolved the rendering issues on scrolling.
  5. I found that iOS6 and iOS4 for some bizzare reason set my z-index elements to 0. Giving them negative values like "-1 -2 -3" etc fixed the problem.
Danny Luna
Danny Luna
5,899 Points

Thanks, I added a negative -10 value on my #wrapper that was overlapping my #navContainer, and that did the trick.