title: Bootstrap 4 - Glossy effect and z-index
body: <p>I'm working on login page with glossy effect and I have problem with (z-indexes). I made up a good overlay with responsive height as I need, because I have two different forms, but I can't click in to the input or click on the link, but the checkbox works fine, which I really don't understand. I tried to manually change it, but it didn't work either. What should I do and how can I make it work? </p>
  
  <pre><code>/* Login */
  
  #login_box {
    width: 640px;
    background: inherit;
    overflow: hidden;
    border-radius: 8px;
    max-width: 50%;
    z-index: 2;
  }
  
  #login_box:before {
    content: "";
    position: absolute;
    top: -25px;
    left: -25px;
    bottom: -25px;
    right: -25px;
    background: inherit;
    box-shadow: inset 0 0 0 400px rgba(255, 255, 255, 0.3);
    filter: blur(800px);
    z-index: 0;
  }
  
  #login_box form {
    text-align: center;
    z-index: 2;
  }
  
  #login_box input {
    border: 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    margin: 20px 0;
    padding-bottom: 10px;
    font-size: 18px;
    z-index: 2;
  }
  
  #login_box input:focus,
  #login_box input:active {
    border: 0;
    margin-bottom: 22px;
  }
  
  #LogRegTab {
    border: 0;
  }
  
  .box_sub {
    font-size: 15pt;
    text-align: left;
  }
  
  #register form {
    width: 80%;
  }
  
  .nav-tabs .nav-link {
    border: 0 !important;
    padding: 5px 10px !important;
    margin: 0 !important;
    font-size: 15pt;
  }
  </code></pre>
  
  <p>and HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"&gt;
      &lt;link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"&gt;
      &lt;!-- Scripts (jQuery) --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" /&gt;
      &lt;!-- Tittle --&gt;
      &lt;title&gt;Test&lt;/title&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;main class="container-fluid p-0 m-0"&gt;
        &lt;section style="background-image: url('https://picsum.photos/1920/1080/?random');"&gt;
          &lt;div class="container-fluid"&gt;
            &lt;div class="row justify-content-center mt-5"&gt;
              &lt;div class="col-xl-4"&gt;
                &lt;!-- Tab panes --&gt;
                &lt;ul class="nav nav-tabs" id="LogRegTab" role="tablist"&gt;
                  &lt;li class="mr-2"&gt;
                    &lt;a class="nav-link active" id="login-tab" data-toggle="tab" href="#login" role="tab" aria-controls="login" aria-selected="true" onClick="logHeight();"&gt;Login&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                    &lt;a class="nav-link" id="register-tab" data-toggle="tab" href="#register" role="tab" aria-controls="register" aria-selected="false" onClick="regHeight();"&gt;Register&lt;/a&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="row justify-content-center"&gt;
              &lt;div id="login_box" class="col-xl-4 mb-5"&gt;
                &lt;div class="tab-content" id="LogRegTabContent"&gt;
                  &lt;div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab"&gt;
                    &lt;form action="" class="mx-auto"&gt;
                      &lt;h1 class="box_header"&gt;Login&lt;/h1&gt;
                      &lt;div class="form-group"&gt;
                        &lt;label class="sr-only" for="email"&gt;Email address&lt;/label&gt;
                        &lt;input type="email" class="form-control" id="email" placeholder="Email" required&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                        &lt;label class="sr-only" for="password"&gt;Password&lt;/label&gt;
                        &lt;input type="password" class="form-control" id="password" placeholder="Heslo" required&gt;
                        &lt;div class="help-block text-right "&gt;&lt;a href=""&gt;Forget the password ?&lt;/a&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                        &lt;button type="submit" class="btn btn-login btn-block"&gt;Sign in&lt;/button&gt;
                      &lt;/div&gt;
                      &lt;div class="custom-control custom-checkbox mx-auto"&gt;
                        &lt;input type="checkbox" class="custom-control-input" id="keeplogin"&gt;
                        &lt;label class="custom-control-label" for="keeplogin"&gt;keep me logged-in&lt;/label&gt;
                      &lt;/div&gt;
                    &lt;/form&gt;
                  &lt;/div&gt;
                  &lt;div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab"&gt;
                    &lt;form action="" class="mx-auto"&gt;
                      &lt;h1 class="box_header pt-4"&gt;Register&lt;/h1&gt;
  
                      &lt;h2 class="box_sub"&gt;Kontakní údaje&lt;/h2&gt;
                      &lt;div class="form-group"&gt;
                        &lt;label class="sr-only" for="email"&gt;Email address&lt;/label&gt;
                        &lt;input type="email" class="form-control" id="email" placeholder="Email" required&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                        &lt;label class="sr-only" for="phone"&gt;Telefon&lt;/label&gt;
                        &lt;input type="phone" class="form-control" id="phone" placeholder="Telefon" required&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                        &lt;label class="sr-only" for="name"&gt;Jméno&lt;/label&gt;
                        &lt;input type="name" class="form-control" id="name" placeholder="Jméno" required&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                        &lt;label class="sr-only" for="surname"&gt;Příjmení&lt;/label&gt;
                        &lt;input type="surname" class="form-control" id="surname" placeholder="Příjmení" required&gt;
                      &lt;/div&gt;
                      &lt;h2 class="box_sub"&gt;Registrační údaje&lt;/h2&gt;
                      &lt;div class="form-group"&gt;
                        &lt;label class="sr-only" for="username"&gt;Uživatelské jméno&lt;/label&gt;
                        &lt;input type="username" class="form-control" id="username" placeholder="Uživatelské jméno" required&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                        &lt;label class="sr-only" for="password"&gt;Password&lt;/label&gt;
                        &lt;input type="password" class="form-control" id="password" placeholder="Heslo" required&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                        &lt;label class="sr-only" for="password"&gt;Password&lt;/label&gt;
                        &lt;input type="password" class="form-control" id="password" placeholder="Ověření hesla" required&gt;
                      &lt;/div&gt;
                      &lt;h2 class="box_sub"&gt;Fakturační údaje&lt;/h2&gt;
                      &lt;div class="form-group"&gt;
                        &lt;label class="sr-only" for="Streetandnumber"&gt;Ulice a č. p.&lt;/label&gt;
                        &lt;input type="Streetandnumber" class="form-control" id="Streetandnumber" placeholder="Ulice a č. p." required&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                        &lt;label class="sr-only" for="town"&gt;Obec&lt;/label&gt;
                        &lt;input type="town" class="form-control" id="town" placeholder="Obec" required&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                        &lt;label class="sr-only" for="PSC"&gt;PSČ&lt;/label&gt;
                        &lt;input type="PSC" class="form-control" id="PSC" placeholder="PSČ" required&gt;
                        &lt;select class="custom-select"&gt;
                          &lt;option value="1"&gt;lorem&lt;/option&gt;
                          &lt;option value="2"&gt;lorem&lt;/option&gt;
                          &lt;option selected value="3"&gt;lorem selected&lt;/option&gt;
                        &lt;/select&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                        &lt;button type="submit" class="btn btn-login btn-block"&gt;Sign in&lt;/button&gt;
                      &lt;/div&gt;
                    &lt;/form&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/section&gt;
      &lt;/main&gt;
      &lt;script src="js/dropdown_hold.js"&gt;&lt;/script&gt;
  
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>