Search code examples
htmlcsspositionz-indexforms

Hyperlink not clickable using position and z-index

I am working on a contact form. I want to make a form same asenter image description here in image

i use position absolute in social media wrapper and z-index:-1;

but facing a problem with hyperlink on social media icon. html and css code is given below

html

    <div class="section text-center c-index">
            <div class="container">
                <div class="row">
                    <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">
                        <div class="form-wrapper">
                            <h3 class="contact-head">Contact Us</h3>
                            <div class="form-inside">
                                <form>
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="Name">
                                    </div>
                                    <div class="form-group">
                                        <input type="email" class="form-control" placeholder="Email">
                                    </div>
                                    <div class="form-group">
                                        <textarea name="" id="" cols="10" rows="1" class="form-control" placeholder="Message"></textarea>
                                    </div>
                                    <div id="checkbox" class="checkbox">
                                        <label>
                                            <input type="checkbox"> Agree with terms & conditions
                                        </label>
                                    </div>
                                    <button type="submit" class="btn contact-submit">Submit</button>
                                </form>
                            </div>
                            <div class="social-media-wrapper">
                                <ul>
                                    <li>
                                        <a href="#" target="_blank">
                                            <i class="fa fa-twitter fa-2x" aria-hidden="true"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank">
                                            <i class="fa fa-facebook-official fa-2x" aria-hidden="true"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank">
                                            <i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank">
                                            <i class="fa fa-google-plus-official fa-2x" aria-hidden="true"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Css 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;
 }
Solution
    1. You have added unnecessary position: relative and z-index properties on many elements. Remove all of them.
    2. Add position: relative on the container having your social media div.
    3. Draw required background with :before or :after pseudo element with lower z-index. This will enable the social icons to remain clickable.

    .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;
  position: relative;
}
.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: -100px;
  padding-right: 40px;
  padding-left: 40px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.social-media-wrapper:before {
  background-color: #00a0ff;
  border-radius: 10px;
  position: absolute;
  content: '';
  z-index: -1;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

.social-media-wrapper ul {
  list-style: none;
  padding: 0;
}

.social-media-wrapper ul li {
  padding-top: 20px;
  padding-bottom: 20px;
}
.social-media-wrapper ul li a {
  color: #ffffff;
}
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="section text-center c-index">
  <div class="container">
    <div class="row">
      <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">
        <div class="form-wrapper">
          <h3 class="contact-head">Contact Us</h3>
          <div class="form-inside">
            <form>
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Name">
              </div>
              <div class="form-group">
                <input type="email" class="form-control" placeholder="Email">
              </div>
              <div class="form-group">
                <textarea name="" id="" cols="10" rows="1" class="form-control" placeholder="Message"></textarea>
              </div>
              <div id="checkbox" class="checkbox">
                <label>
                  <input type="checkbox"> Agree with terms & conditions
                </label>
              </div>
              <button type="submit" class="btn contact-submit">Submit</button>
            </form>
          </div>
          <div class="social-media-wrapper">
            <ul>
              <li>
                <a href="#" target="_blank">
                  <i class="fa fa-twitter fa-2x" aria-hidden="true"></i>
                </a>
              </li>
              <li>
                <a href="#" target="_blank">
                  <i class="fa fa-facebook-official fa-2x" aria-hidden="true"></i>
                </a>
              </li>
              <li>
                <a href="#" target="_blank">
                  <i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i>
                </a>
              </li>
              <li>
                <a href="#" target="_blank">
                  <i class="fa fa-google-plus-official fa-2x" aria-hidden="true"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>