css - z-index を使用した CSS レイヤー

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-index: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

大きな緑色のボタンをクリックすると、コンテンツのない私の白い写真が表示されます。