CSS Слои с Z-индекс

Question

У меня есть что-то вроде этого

<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; 

Я хочу, чтобы отобразить «Некоторое содержимое» по картинке.

Он работает, если <div id="page"> с z-индексом: 0; и если я изменю его на z-index: 1; Я вижу картинку, но мой контент находится под ней.

Как разместить свой контент по картинке и по-прежнему иметь <div id="page"> с z-index: 1 ;?

В качестве примера см ссылки: http://entw.yogabox.de/Specials/Yogamatten-2-Wahl/Asana-Yoga-Matte-Sticky-lila-2-Wahl.html

Вы должны нажать на большую зеленую кнопку, а затем вы увидите мое белое изображение без содержания.

Answer 1

Вы не можете дать ребенку div более высокий индекс z, чем его родитель. Его отношение к родительскому заданному z-индексу.

Чтобы достичь желаемого эффекта, вам нужно поместить div с содержимым из div с id = "page".

Но есть также довольно простой раствор. Использовать лайтбокс 2.

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