html - Bootstrap 4.0。按钮不适用于另一个 DIV

Question

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

我的网站有一个小问题，当网站底部的缓冲箭头出现时，我无法点击按钮。不管它是什么，这个 Bootstrap 按钮或 HTML 按钮，它都不起作用。

我什至尝试了 z-index: 999;，但没有任何效果。

这是代码。

• fiddle 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 已经是一个 positioned 元素，这意味着您已经明确地在其上应用了 position 属性(并且该值不是静态的).这里需要注意的是，对于 z-index为了工作，元素必须被定位。
最后，您还可以在可点击元素上设置 z-index 和 position: realtive。