引导程序 4.0。按钮不适用于另一个 DIV答案

【问题标题】：Bootstrap 4.0. Buttons don't work with another DIV引导程序 4.0。按钮不适用于另一个 DIV
【发布时间】：2018-06-05 23:53:38
【问题描述】：

这是我第一次在 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>

【问题讨论】：

@dferenc 的回答将解决您的问题，但您可能希望在 <div class="down bounce arrow-center"> 上使用 display: none 直到它有内容，或者更改大小。真正的问题是它阻止了页面上的所有其他内容

标签： html css twitter-bootstrap button bootstrap-4

【解决方案1】：

快速解决方法是将z-index 应用于.outer 类，因此使用您现有的样式：

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

这会立即生效，因为.outer 已经是一个定位元素，这意味着您已经明确地在其上应用了位置属性（并且该值不是静态的）。需要注意的是，z-index 为了工作，必须定位元素。
最终，您也可以在可点击元素上设置z-index together 和position: realtive。

【讨论】：