2

I have a site which utilises a bottom of the page menu (Position:fixed divs with images in them) using hover CSS on the divs to swap between an icon and for example a search box or a box with social media icons in it etc. It does this by making the foreground div go z-index:-1 and the background div coming forward using z-index:100 on hover (ie touch on iPad). The images also have opacity applied, so it needs the z-index:-1 to pop the old foreground image in behind the full screen background image in the body div otherwise you see the old foreground image through the new foreground image after hovering.

Works fine on IE, FF, Safari etc and on iPad IOS 4.3. But on iPad IOS 5.1 (just upgraded my iPad - not sure on IOS 5.0) the z-index:-1 does not put the divs behind the background body div image, but in front of it. I have tried assigning a z-index value to all the divs, the body and the background, but nothing I do makes the -1 send it to the back. I have also tried making all positive z-index numbers and using z-index:0 or z-index:1 as the last in the stack but this also didn't work.

The 5.1 z-index seems a bit flaky as even other parts not using a -1 z-index have changed stacking orders on the iPad vs other browsers so things are disappearing behind lower ranked z-index's. Very weird.

Any ideas appreciated,

Thanks,

Brad

More Information:

CSS
#BottomMidLeft { position: fixed; bottom:0px; left:260px; width: 330px; height:120px; } 
#BottomMidPebbleLSml {z-index:60; position: fixed; left:220px; bottom:-95px; background-color:transparent; width:500px; filter:alpha(opacity=80); -moz-opacity:0.80; -khtml-opacity: 0.80; opacity: 0.80; } 
#BottomSearchIconGoogle {z-index:70; position: fixed; left:331px; bottom:3px; } 
#BottomMidPebbleLBig {z-index:-1; position: fixed; left:200px; bottom:-97px; background-color:transparent; width:500px; filter:alpha(opacity=88); -moz-opacity:0.88; -khtml-opacity: 0.88; opacity: 0.88; }
#BottomSearchGoogle {z-index:-1; position: fixed; left:287px; bottom:22px; background-color:transparent; width:260px;} 
#BottomMidLeft:hover #BottomMidPebbleLSml{ z-index:-1; } 
#BottomMidLeft:hover #BottomSearchIconGoogle{ z-index:-1; } 
#BottomMidLeft:hover #BottomMidPebbleLBig{ z-index:170; } 
#BottomMidLeft:hover #BottomSearchGoogle{ z-index:170; } 

HTML
<div id="BottomMidLeft"> 
<div id="BottomMidPebbleLSml"> <img src="/images/elements/pebble-mid_nh.png" alt="Pebble for Overlays" width="300px"/> </div> 
<div id="BottomSearchIconGoogle"> <img src="/images/elements/Book1.png" alt="Search Icon" width="55px"/> </div>
<div id="BottomMidPebbleLBig"> <img src="/images/elements/pebble-mid_nh.png" alt="Pebble for Overlays" width="400px" /> </div> 
<div id="BottomSearchGoogle"> Google Search Code Here  </div>
</div> 
<!-- this is the end div #BottomMidLeft -->
Brad
  • 21
  • 3
  • 1
    Don't use negative `z-index`, iOS doesn't like it. – Christian Jul 03 '12 at 07:42
  • Yeah, I noticed that :-) So is there an alternative? as the background seems to always want to be z-index:0 and I need to pop the divs in behind it. If I make either the body tag or the full screen background image z-index:5, all my foreground divs seem to disappear, even those with a higher z-index? This was the strange behaviour I eluded to. Works fine on everything else – Brad Jul 03 '12 at 08:01
  • z-index stuff can be a bit tricky to get right. It will definitely be possible, perhaps if you can provide some of the problem code so we can take a look? Then we might have a better idea of how to fix it. – Christian Jul 03 '12 at 08:07

0 Answers0