Z-index problem on iPhone layout

HTML & CSS
1

I posted this on Stackoverflow and got nada, so I hope you can help.

I’ve created an HTML5/responsive-ish page and am using media queries to create a seperate iPhone version. It’s still in progress, so so many things wrong with it, but one issue is driving me slightly nuts.

My smartphone layout is much different to my desktop/iPad version, so I’ve had to use absolute positioning to get the iPhone assets into place. I can’t really move the html around or I will break the desktop version (which is supposed to look like an existing flash site, hence the rather poor combination of responsive grid and fixed pixel sized elements).

I’ve now got a bit of title text that simply will not layer over the cassette image div no matter what I do.

This is the title css:

#playlistTitle {
			width:140px;
			height:32px;
			position:absolute;
			top:120px;
			left:60px;
			z-index:500;
			background-color:transparent;
			border:1px solid red;
			text-align:center;
        }

and this is the div it’s supposed to layer over:

    #reelWrapper {
		height:137px;
		width:254px;
		position:absolute;
		margin:156px 6px 6px 16px;
		background:url(../images/cassette.jpg) no-repeat 0 0;
		z-index:50;
	}

You can see on the iPhone that the bottom of the title div falls underneath the cassette image div (I’m using visible borders to show where it’s not working properly). What I want is for it to layer on top so I can move it down to look like this: http://lisadearaujo.com/clientaccess/wot-sound/images/screen.jpg

The page is here: http://lisadearaujo.com/clientaccess/wot-sound/indexiPad.html
And the css here: http://lisadearaujo.com/clientaccess/wot-sound/css/styles.css

Any ideas, I would be very, very grateful!

2

Hi yolise. Welcome to the forums. :slight_smile:

That’s always asking for a bit of trouble, so better avoided if possible.

To be honest, I’m very confused at the moment. I can’t figure out what the issue is. Which is the title text?

3

I’m thinking that’s going to be my only solution (it’ll cut down on unneeded code for the HTML5 anims as well), but for now it’s making me crazy so I’m hoping to at least understand why it’s happening.

To be honest, I’m very confused at the moment. I can’t figure out what the issue is. Which is the title text?

I’ve done a new screenshot that may make it more clear. The text in white with the red border is the Playlist title (id playlistTitle) which should appear on top of the cassette image (which is the background image of id “reelwrapper”).

400×600 53 KB

It’s positioned where it is temporarily so I can see where it is, but once I can get it to layer over the reelwrapper, I’ll move it down and re-color the text black…

(Oh, and I’ve tried various combinations of position:relative for these and the parent elements - still the same z-index issue.)

4

Ah yes, I see. Sorry.

This will probably annoy you, but my first inclination is to take a step back and rethink the desktop version first. Is there really a need for <canvas>? (Maybe there is … I’m just asking.) I’ll wager that you could create one flexible version of this that would scale nicely for various screens. But I guess we need to be clear on what this page will need to do when finished.

5

Heh. No, I’m not easily annoyed.

I actually don’t need a desktop version per se. Because the sound files are mpgs, it will be easiest to fall back to Flash: http://wot-sound.co.uk, however, for iPad, I do need to duplicate that in HTML5, which I’ve mostly done, although granted it does need some re-thinking, as it doesn’t actually work that well on an iPad - but that’s still a work in progress.

So, the smartphone version is simply a responsive version of the iPad version.

Like I said, I’m sort of resigned to doing a completely bespoke iPhone/smartphone version as even the HTML5 isn’t working all that well - the audio player is a bit spotty, performance-wise and there’s no real feedback to tell the user that the music has started. The audio element isn’t really that well supported on iPhone, I’ve determined. And I can redesign the iPhone version completely - I’m not tied into duplicating the flash version like I am with iPad.

But I’m still curious as to why the layering isn’t working. :slight_smile:

(The Canvas element is for the kinetic animation of the reels. I’m quite new to HTML5, so it’s a bit of a slog.)

6

Hi,

It’s not working because ultimately the stacking context of a positioned child is controlled by any ancestor that has a position defined and it is the z-index of that ultimate positioned ancestor that dictates where all the children will go. A positioned parent with a z-index of 1 becomes “atomic” and all its children will effectively be z-index 1 as far as elements outside that stacking context are concerned.

In your case your absolute element is nested inside about 5 divs all of which have position:relative set and no matter what z-index you apply to the child it will not have an effect outside the current context as the ultimate parent has a z-index of 1.

You could remove all the z-indexes from the parents right back to and including #recorderWrapper and then your absolute element will suddenly pop on top because a positioned element without a z-index becomes “auto” and effectively provides no context for stacking. However ie6 and 7 don’t understand auto" for z-index and always apply a z-index of 0 to positioned elements but I guess in this scenario you won’t be concerned with them (otherwise you would need ot remove all the position:relatives as well).

Hope that explains it :wink:

7

Interesting. Well, that’s worked!

I think there were two issues (actually three) at work here: over-enthusiastic z-indexing for a start. Secondly, I had thought that the inherited behaviour required that all ancestor elements had the positioning and z-index defined, and finally, I forgot that I had applied z-indexes to elements in my iPad media query css and didn’t include them in my various combinations of with and without z-indexes!

Thanks very much! I still have to redesign, I think, but I have learned something new and that was my ultimate goal here.

8