On one of my web pages i have got photos and a video embedded. If you click on a picture a larger version appears but they are appearing behind the video. I have had a play about with the z index of both but this doesnt seem to have any effect. The webpage is http://thefreeiphone3gs.co.uk/Proof/ and any help will be repped. Thank you
The z-index only work when you add the "position" element as JahRasta explained. But, position: absolute; isn't your only choice. With an absolute position, the element won't work with your content because it does not take up any space in your document. Absolute positioning actually removes the item which has the "position:absolute" attribute from the document flow. I always use "position: relative;". A relative position is calculated from the original position in the document and will go with the flow. Either way, when you're using positioning, you have to be careful because if you don't perfect it, your items are likely to cover up any content that is in their way.
Ok i have added in the position but still doesn't seem to work? The object is in a div and i have tried setting the div z index too but that doesnt alter either. Will i need to alter anything in the js?
Is this a Flash video? You can set your z-index as high as the moon and it will still kick sand in your face and steal your girlfriend. Not that it hurts to set an insane z-index just in case. If it's Flash (I'm lazy and didn't look), or some similar video object, what happens when you set the param called wmode or window mode to "opaque"? Normally this can set a video object "back into" a page. *edit I do mean on the <object> tag, not the illegal and proprietary embed tag. I also don't mean in the Flash video itself (I know you can set wmode in the swf itself). Setting it to "transparent" will do this too if the video cannot have a background colour, but I hear it's more work for the browser to use this if you don't need it. Gary Turner would have to explain that one more. He's the one who said it. : )