Кнопки 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> 

Когда кнопки находятся вне сНа 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; 

    } 

Что я делаю неправильно, что не позволяет активировать кнопки? Спасибо, Джек.

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: 0, установив z-index: -1 вы движетесь/рендеринга div позади body