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 encase。

#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;

  }

我做错了什么不允许激活按钮？谢谢 - jack 。

Answer 1

您正在设置一个负的 z-index，它将 div 移到主层后面。下图显示了 z-index 的工作原理。页面上的所有内容，例如默认情况下，您的 body 有 z-index: 0，通过设置 z-index: -1 您正在移动/渲染 div 后面的 正文