HTMLとCSSのボタンが機能しない

Question

こんにちは私は自分が作っているウェブサイトを持っています。私は、バックグラウンドが追加される前に仕事をしていた背景の上にテキストとボタンを持っています。しかし今、彼らはもはや働いていません。それらは画面に描画されますが、機能しません。分間、このコードを見てください：

<div id = "rect0"> 

    <div class = "banner grid_18" href="about.html"> 
    </div> 
    <a href="logic.html" class="button" id ="new">View Article</a> 

    <div class=" grid_8 callout"> 
    </div> 
    <a href="gallery.html" class="button" id ="new1">View Gallery</a> 


</div> 

ボタンは、その後のdiv rect0外にある場合、それらは機能しますが、彼らは内にあるとき、彼らはクリックできません。ここにそれを達成しているCSSケースがあります。

#rect0{ 
position: relative; 
margin-top: -10px; 
margin-left: 0px; 
    width: 951px; 
height: 270px; 
padding-left: 4px; 
padding-top: 1px; 
background: #ffffff; 
z-index: -1; 
} 

.button{ 
background: #242324; 
color: #B7B7B7; 
padding: 6px; 
color: white; 
font-size: 11px; 
text-transform: uppercase; 
} 

.button:hover{color: #d2d2d2;} 

    #new{ 
position: absolute; 
margin-left: -140px; 
margin-top: 220px; 
    } 

    #new1{ 
position: absolute; 
margin-left: 117px; 
margin-top: 220px; 

    } 

ボタンをアクティブにできないのは間違っていますか？ありがとう - ジャック。

Answer 1

z-index: -1を削除すると無効になります。参考として、Fiddleを参照してください。

ボタンがすべてdivの中にあるため、z-index: -1;を適用すると、すべてがバックグラウンドにプッシュされ、無効になります。

Answer 2

z-indexが#rect0の場合、そのコンテナdivはその親の背後にあります。 0または1

Answer 3

z-indexを設定すると、divがメインレイヤーの後ろに移動します。次の図は、Zインデックスの仕組みを示しています。ページ上のすべて（例：デフォルトでは、あなたの体は、z-index: -1を設定することにより、あなたは、私が確認するためのライブバージョンを確認する必要があると思いますが、私はそれが理由のz 'のだ推測しているbody