巨人を表示したいウェブサイトに取り組んでいます画像バックグラウンドでのスライドショーと引用とリンク。技術的な目的で ( EDIT : 以下のコメントで説明)、同じ親要素に存在する必要があります。さらに、コンテンツを表示していて、ある時点で背景画像をコンテンツ全体に表示したいと考えています。これは、2 つのコンテンツ要素 (#headerと#main) の間にマージンを設定することで実現しました。説明するのは少し難しいですが、このjsfiddleが私が何をしているかのアイデアを与えてくれることを願っています.
問題は、背景に表示されているリンクと引用がクリックできないことです。これは、クリックが代わりに上に表示されている要素 ( #header) に向けられているためです。私は知っていますが、IEのサポートと要素pointer-events: none;内のクリックを解釈できる必要があるため、それは良くありません。#header
これは、この回答で言及されているコンテキストのスタックに何らかの形で起因していると思いますが、正しく理解できません。で負の z-index を使用しないと目的のレイアウトを取得できませんが、#background内部のリンク#backgroundはおそらくより高い z-index の親に配置する必要があります。おそらく、マークアップの別の場所に配置するのが妥当ですが、上記のように、リンクは 内の残りのコンテンツに関連してい#backgroundます。リンクのスタッキング コンテキストを親要素のスタッキング コンテキストの「上」にレンダリングすることは可能ですか?
コードは少し長すぎて、ここで何の役にも立たず、実際にはそれほど複雑ではないので、前述のjsfiddleを参照してください。