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，将div移到主图层后面。以下图片显示了z-index的工作原理。页面上的所有内容，例如默认情况下，您的正文为z-index: 0，通过设置z-index: -1您正在移动/呈现div

后面的body

Answer 2

z-index上的否定#rect0正在将容器div推到其父级“后面”。尝试将其更改为0或1

Answer 3

删除z-index: -1使其有效。请参阅此Fiddle作为参考。

由于您的按钮全部位于div内，因此您应用z-index: -1;所有按钮都会被推入后台并因此被禁用。