title: Hyperlink not clickable using position and z-index
body: <p>I am working on a contact form.
  I want to make a form same as<a href="https://i.stack.imgur.com/fLU1j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fLU1j.png" alt="enter image description here"></a> in image</p>
  
  <p>i use position absolute in social media wrapper and z-index:-1; </p>
  
  <p>but facing a problem with hyperlink on social media icon.
  html and css code is given below</p>
  
  <p>html</p>
  
  <pre><code>    &lt;div class="section text-center c-index"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-6 col-sm-6 col-xs-6 col-md-offset-3 col-sm-offset-3 col-xs-offset-3 form-wrapper-main"&gt;
                          &lt;div class="form-wrapper"&gt;
                              &lt;h3 class="contact-head"&gt;Contact Us&lt;/h3&gt;
                              &lt;div class="form-inside"&gt;
                                  &lt;form&gt;
                                      &lt;div class="form-group"&gt;
                                          &lt;input type="text" class="form-control" placeholder="Name"&gt;
                                      &lt;/div&gt;
                                      &lt;div class="form-group"&gt;
                                          &lt;input type="email" class="form-control" placeholder="Email"&gt;
                                      &lt;/div&gt;
                                      &lt;div class="form-group"&gt;
                                          &lt;textarea name="" id="" cols="10" rows="1" class="form-control" placeholder="Message"&gt;&lt;/textarea&gt;
                                      &lt;/div&gt;
                                      &lt;div id="checkbox" class="checkbox"&gt;
                                          &lt;label&gt;
                                              &lt;input type="checkbox"&gt; Agree with terms &amp; conditions
                                          &lt;/label&gt;
                                      &lt;/div&gt;
                                      &lt;button type="submit" class="btn contact-submit"&gt;Submit&lt;/button&gt;
                                  &lt;/form&gt;
                              &lt;/div&gt;
                              &lt;div class="social-media-wrapper"&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;
                                          &lt;a href="#" target="_blank"&gt;
                                              &lt;i class="fa fa-twitter fa-2x" aria-hidden="true"&gt;&lt;/i&gt;
                                          &lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;
                                          &lt;a href="#" target="_blank"&gt;
                                              &lt;i class="fa fa-facebook-official fa-2x" aria-hidden="true"&gt;&lt;/i&gt;
                                          &lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;
                                          &lt;a href="#" target="_blank"&gt;
                                              &lt;i class="fa fa-linkedin-square fa-2x" aria-hidden="true"&gt;&lt;/i&gt;
                                          &lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;
                                          &lt;a href="#" target="_blank"&gt;
                                              &lt;i class="fa fa-google-plus-official fa-2x" aria-hidden="true"&gt;&lt;/i&gt;
                                          &lt;/a&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><b>Css Code </b></p>
  
  <pre><code>.form-wrapper {
       background-color: #ffffff;
      -webkit-box-shadow: 0px 10px 30px 0 rgba(0, 1, 1, .4);
      box-shadow: 0px 10px 30px 0 rgba(0, 1, 1, .4);
       -webkit-border-radius: 10px;
        border-radius: 10px;
     z-index: 3;
    }
    .contact-head,
   .form-inside {
     text-align: left;
    }#checkbox {
     padding-left: 55px;
    padding-top: 10px;
    padding-bottom: 10px;
  }.contact-submit {
     margin-left: 55px;
     margin-top: 10px;
     margin-bottom: 20px;}
  .contact-head {
     padding-top: 20px;
     padding-bottom: 20px;
     padding-left: 55px;
  }
  .form-inside form textarea {
     resize: none;
  }
  .social-media-wrapper {
     position: absolute;
     top: 60px;
    right: -80px;
    padding-right: 40px;
     padding-left: 40px;
    padding-top: 20px;
     padding-bottom: 20px;
    background-color: #00a0ff;
    border-radius: 10px;
    z-index: -1;
  }
  .c-index {
    z-index: 1;
  }
  .social-media-wrapper ul {
     list-style: none;
     padding: 0;
    position: relative;
    z-index: 10;
   }
  
  .social-media-wrapper ul li {
     padding-top: 20px;
     padding-bottom: 20px;
     position: relative;
     z-index: 10;
   }
   .social-media-wrapper ul li a {
     color: #ffffff;
     z-index: 10;
     position: relative;
   }
  </code></pre>