Bootstrap 4.0. Buttons don't work with another DIV

Question

It's my first time to ask a question on StackOverflow:

I have a little problem with my website, when the bumping arrow is at the bottom of the site I cannot click on buttons. Whatever it is, this Bootstrap button or HTML button, it doesn't work.

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

Here is the code.

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>

@dferenc's answer will solve your issue, but you may want to use `display: none` on the `
` until it has content, or maybe change the sizing. The true problem is that it is blocking everything else on the page — Felipe, Dec 24 '17 at 00:18

score 0 · Accepted Answer · answered Dec 23 '17 at 22:58

A quick fix would be applying the z-index to the .outer class, so with your existing styles:

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

This works right away, as the .outer is already a positioned element, meaning that you have applied the position property on it explicitly (and the value is not static). It is important to note here, that for the z-index in order to work, the element has to be positioned.
Eventually you could set the z-index together with position: realtive on the clickable elements as well.

Bootstrap 4.0. Buttons don't work with another DIV

1 Answers1