Bootstrap 4.0. Buttons do not work with another DIV

Question

This is my first question to ask a question about StackOverflow:

I have a little problem with my site, when the oblique arrow is at the bottom of the site, I can’t click on the buttons. Whatever it is, this Bootstrap button or HTML button, it does not work.

I tried even z-index: 999;, but nothing works.

Here is the code.

• script https://jsfiddle.net/52oo249q/

• HTML and 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>

Run codeHide result

Answer 1

A quick fix will apply the class z-indexto .outer, so with your existing styles:

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

, .outer , , position ( ). , z-index .
z-index position: realtive , .