На сколько логично выполнение задачи?

 .btn {
width: 250px;
margin: 0 25px;
margin-top: 100px;
padding: 20px 0;
line-height: 20px;
text-align: center;
text-transform: uppercase;
color: white;
background: #2c3e50;
cursor: pointer;
box-shadow:
    inset 0 -5px 0 #2ecc71,
    inset 0 5px 0 #16a085  ,
    0 -20px 0 -10px #c0392b,
    0 20px 0 -10px #2980b9,
    0 40px 0 -20px #3498db,
    0 -40px 0 -20px #e74c3c;
}
.help {
position: absolute;
left: 25px;
top: 100px;
width: 125px;
height: 60px;
box-shadow:
    inset 0px -5px 0 0 #16a085,
     inset 0px 5px 0 0 #2ecc71;
}

Выполнил на 100% но есть вопрос. поверх кнопки существует невидимый блок. Если бы наша кнопка была активна, при нажатии на ту область, где сверху наш блок, она бы сработала?

Если для блока .help не прописан отрицательный z-index, то не вся область кнопки будет доступна для клика.