CSS Layers with z-index

Question

I have something like this

<div id="page"> // z-index:1; position:relative;
   <div>Some Content</div> // z-index:10000: positon: fixed;
</div>
<div id="mask"></div> // z-index:9998; position:absolute;
<img> // z-index:9999; position: fixed;

I want to display "Some Content" over the picture .

It works if <div id="page"> with z-index:0; and if I change it to z-index:1; I see the picture but my Content is under it.

How can I put my Content over the picture and still have <div id="page"> with z-index:1;?

As an example see this Link: http://entw.yogabox.de/Specials/Yogamatten-2-Wahl/Asana-Yoga-Matte-Sticky-lila-2-Wahl.html

You should click the big green button and then you'll see my white picture without content.

Answer 1

You can not give a child div a higher z-index than its parent. Its Relative to the parent given z-index.

You need to put the div with the content out of the div with the id="page" to achieve the desired effect.

But there is also a quite easier soluten. Use lightbox 2.

http://lokeshdhakar.com/projects/lightbox2/