Html and CSS buttons do not function

Question

Hello I have a website that I am making. I have text and buttons over a background that used to work before the background was added. But now they no longer work. They are drawn to the screen but do not function. Look at this code for a minute:

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

When the buttons are outside the div rect0 then they function but when they are inside they are not clickable. Here's the css encase that is effecting it.

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

  }

What am I doing wrong that doesn't allow the buttons to be activated? Thanks - Jack.

I'd need to see the live version to confirm, but I'm guessing it's because of z-index: -1. Do you have a link? — darrylyeo
– darrylyeo, Commented May 28, 2016 at 17:51

Avraam Mavridis · Accepted Answer · 2016-05-28 17:54:03Z

1

You are setting a negative z-index which moves the div behind the main layer. The following pictures shows how the z-index works. Everything on the page, e.g. your body by default have z-index: 0, by setting z-index: -1 you are moving/rendering the div behind the body

answered May 28, 2016 at 17:54

Avraam Mavridis

8,97023 gold badges87 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Keiwan · Accepted Answer · 2016-05-28 17:53:56Z

0

Removing z-index: -1 makes it work. See this Fiddle as reference.

Since your buttons are all inside the div you apply z-index: -1; to they all get pushed into the background as well and are therefore disabled.

answered May 28, 2016 at 17:53

Keiwan

8,3115 gold badges38 silver badges49 bronze badges

Comments

Ito Pizarro · Accepted Answer · 2016-05-28 17:52:55Z

0

The negative z-index on #rect0 is pushing the container div "behind" its parent. Try changing it to 0 or 1

answered May 28, 2016 at 17:52

Ito Pizarro

1,6071 gold badge12 silver badges21 bronze badges

Collectives™ on Stack Overflow

Html and CSS buttons do not function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related