Bootstrap 4.0。按钮不适用于其他DIV

Question

这是我第一次在StackOverflow上提问：

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

我甚至试过z-index: 999;，但没有任何作用。

这是代码。

• 小提琴https://jsfiddle.net/52oo249q/
• HTML和CSS

* {
  margin: 0px;
}

body {
  background-color: #CCC;
}

i {
  border: solid #111111;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  width: 20px;
  height: 20px;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.arrow {
  border-style: solid;
  border-width: 5px;
  border-radius: 50px;
  border-color: #fafafa;
  background-color: #fafafa;
  padding: 20px;
}

.arrow-center {
  text-align: center;
  padding-top: 760px;
}

.arrow-center div {
  display: inline-block;
  text-align: left;
}

@media (min-width: 767px) {
  .arrow-center-2 {
    margin-top: -45px !important;
  }
}

.bounce {
  -moz-animation: bounce 3s infinite;
  -webkit-animation: bounce 3s infinite;
  animation: bounce 3s infinite;
}

@-moz-keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@-webkit-keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.portfolios {
  background-color: #fafafa;
  height: 800px;
}

.outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  padding-top: 100px;
  padding-bottom: 50px;
  border: 1px solid #111111;
  text-align: center;
}

.kontent > h1 {
  color: #111111;
  font-size: 40px;
  font-family: 'Montserrat', sans-serif;
}

.kontent {
  color: #111111;
  font-family: 'Montserrat', sans-serif;
}

<div class="portfolios">
  <div class="outer">
    <div class="middle">
      <div class="inner">
        <div class="kontent">
          <h1>PORTFOLIO</h1>
          <p>Lorem impsum dolor sit amet</p>
          <button type="button" class="btn btn-outline-dark">Dark</button>
          <button type="button" style="z-index:999999999;" onclick="alert('Hello world!')">Click Me!</button>
        </div>
      </div>
    </div>
  </div>

  <div class="down bounce arrow-center">
    <div class="arrow">
      <i class="down"></i>
    </div>
  </div>
</div>

Answer 1

快速修复将z-index应用于.outer类，因此使用您现有的样式：

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

这很有效，因为.outer已经是一个定位元素，这意味着你已经明确地在它上面应用了position属性（并且值不是静态的）。重要的是要注意，为了工作，z-index必须定位元素。 最终你可以在可点击元素上设置z-index和position: realtive。