z-index似乎不起作用？

Question

我在bootstrap中遇到z-index的一些问题。

我不得不调整我的英雄单位的z-index，这样我的下拉菜单就可以了。这样做，我的动作按钮现在显示在后台并且无法点击...我尝试更改动作按钮的z-index，但是没有任何东西。将其从英雄单位中移除并将其放置在下方使其可以点击，但英雄单位消失。

不确定是否有任何建议可以提供？谢谢！

页面示例：http://test.saviodesigns.com/ecs/services.php

代码部分：              点击预约约会！

CSS：

#hero2 {
margin-top:0;
background:#000 url(../img/header-image2.jpg) no-repeat center center;
position: relative;
background-size: contain;
width: 100%;
z-index:-1;
}

#action-bar {
background: rgba(255,255,255,0.61);
margin-top: 220px;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
border-bottom: 1px solid #ececec;
position:relative;
z-index:5;
}