Html 引导程序4.0。按钮不'；我不能和另一个部门一起工作

这是我第一次问有关StackOverflow的问题：

我的网站有点问题，当颠簸箭头位于网站底部时，我无法点击按钮。不管它是什么，这个引导按钮或HTML按钮，都不起作用

我甚至尝试了

z-index:999，但没有任何效果

这是代码


拨弄

HTML和CSS



*{
边际：0px；
}
身体{
背景色：#CCC；
}
我{
边框：实心#111111；
边框宽度：0 3px 3px 0；
显示：内联块；
填充：3倍；
宽度：20px；
高度：20px；
}
.下来{
变换：旋转（45度）；
-webkit变换：旋转（45度）；
}
.阿罗{
边框样式：实心；
边框宽度：5px；
边界半径：50px；
边框颜色：#fafafa；
背景色：#fafafa；
填充：20px；
}
.箭头中心{
文本对齐：居中；
填充顶部：760px；
}
.箭头中心分区{
显示：内联块；
文本对齐：左对齐；
}
@介质（最小宽度：767px）{
.箭头-中心-2{
利润率顶部：-45px！重要；
}
}
.弹跳{
-moz动画：弹跳3s无限；
-webkit动画：弹跳3s无限；
动画：无限反弹；
}
@-moz关键帧反弹{
0%,
20%,
50%,
80%,
100% {
-moz变换：translateY（0）；
变换：translateY（0）；
}
40% {
-moz变换：translateY（-30px）；
转换：translateY（-30px）；
}
60% {
-moz变换：translateY（-15px）；
转换：translateY（-15px）；
}
}
@-webkit关键帧反弹{
0%,
20%,
50%,
80%,
100% {
-webkit转换：translateY（0）；
变换：translateY（0）；
}
40% {
-webkit转换：translateY（-30px）；
转换：translateY（-30px）；
}
60% {
-webkit转换：translateY（-15px）；
转换：translateY（-15px）；
}
}
@关键帧反弹{
0%,
20%,
50%,
80%,
100% {
-moz变换：translateY（0）；
-ms变换：translateY（0）；
-webkit转换：translateY（0）；
变换：translateY（0）；
}
40% {
-moz变换：translateY（-30px）；
-ms变换：translateY（-30px）；
-webkit转换：translateY（-30px）；
转换：translateY（-30px）；
}
60% {
-moz变换：translateY（-15px）；
-ms变换：translateY（-15px）；
-webkit转换：translateY（-15px）；
转换：translateY（-15px）；
}
}
.投资组合{
背景色：#fafafa；
高度：800px；
}
.外部{
显示：表格；
位置：绝对位置；
身高：100%；
宽度：100%；
}
.中{
显示：表格单元格；
垂直对齐：中间对齐；
}
.内部{
左边距：自动；
右边距：自动；
宽度：400px；
填充顶部：100px；
填充底部：50px；
边框：1px实心#111111；
文本对齐：居中；
}
.kontent>h1{
颜色：#111111；
字体大小：40px；
字体系列：“蒙特塞拉特”，无衬线；
}
康滕特先生{
颜色：#111111；
字体系列：“蒙特塞拉特”，无衬线；
}

文件夹
奥雷姆·英普苏姆·多洛·西特·阿梅特

黑暗的
点击我！
一个快速修复方法是将
z-index
应用于
.outer
类，因此对于现有样式：

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;
}

这会立即起作用，因为
.outer
已经是一个定位元素，这意味着您已经对其显式应用了position属性（并且该值不是静态的）。这里需要注意的是，为了工作，必须对元素进行定位。

最终，您可以在可点击的元素上设置
z-index
和
位置：realtive
。
@dferenc的答案将解决您的问题，但您可能希望在
上使用
显示：none
，直到它包含内容，或者更改大小。真正的问题是它会阻塞页面上的所有其他内容