絶対位置で動作しないリンク

Question

私はdivの絶対位置と、divの相対位置を持っています。最初のdivにはリンクが含まれ、2番目のdivには最初のdivの内容が含まれています。第1のdivはz-indexが1であり、第2のものがz-indexで-1であり、第1のdivも最初に宣言されています。

ただし、最初のdivのリンクは解除できません。私は今、アイデアを持っている、なぜこれはそうです。

Fiddle

両方 side1

とside2は、背景画像を有することになります。コンテンツは側面に表示されるはずですが、リンクは引き続き機能するはずです。

Second fiddle

Answer 1

z-index: 1を持っている.sideを変更、またはmargin-top: 150pxの代わりpadding-topを持っている#containerを変更してください。

#books 1のz-index有し、それは-1のz-indexと容器内なので、それはまだz-index: -1を有するが（したがって上）の後にレンダリングされる#container下回ってしまいます。

Answer 2

divタグがそれを飛び越しているため、リンクは解除できません。

このタグ：

<div class="side side2"></div> 

は.side2要素にそれを隠すために、下部のzインデックスを与えます。あなたのコードで

Answer 3

は、私はこれが理由だと思う

  z-index: -1; 
      position: absolute; 

を持っています。 -1〜1を変更すると修正されます。もし私が何かが欠けているかどうか分からない場合は、コメントで説明してください。

Answer 4

最初のdivと2番目のdivは、両方ともを共有し、z-index: -1で定義されています。したがって、両方とも同じスタックレベルにあり、マークアップの最後に来るものは前のスタックレベルの上になります。 .side1に-1より大きいZ-インデックスを与えるだけです。