Reputation: 13

Hyperlink not clickable using position and z-index

I am working on a contact form. I want to make a form same as 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;
 }

Upvotes: 0

Answers (3)

Afikur Rahman

Reputation: 347

You can wrap both form and social media with a container div. then set the wrapper div to relative and rest two are absolute. then position it as you want. I think this should do the trick.

Here is a codepen link you can explore Click to see the pen

body {
  padding-top: 45px;
  background: #D2ECFF;
}

.contact-us-form {
  box-shadow: 0px 3px 32px 2px rgba(0, 0, 0, 0.2);
  width: 85%;
  padding: 15px 30px;
  border-radius: 15px;
  z-index: 3;
  position: absolute;
}
.contact-us-form .submit-form {
  background: #FF6600;
  padding-left: 45px;
  padding-right: 45px;
  color: #fff;
}
.contact-us-form h2.title {
  font-size: 2em;
  margin-bottom: 30px;
}

.form-control {
  height: 50px;
  border-radius: 25px;
  font-size: 1.25em;
  padding: 0 20px;
  background: #F8FAFB;
  border: 0;
  box-shadow: none;
  -webkit-box-shadow: none;
}

textarea.form-control {
  padding-top: 15px;
  resize: none;
}

.social {
  background: #00A0FF;
  width: 15%;
  text-align: center;
  position: absolute;
  top: 66px;
  right: 30px;
  padding-left: 25px;
  z-index: 1;
  border-radius: 15px;
}
.social li {
  padding: 15px;
}
.social li:first-child {
  padding-top: 30px;
}
.social li:last-child {
  padding-bottom: 30px;
}
.social li a {
  color: white;
  font-size: 2.25em;
}

.wrap {
  position: relative;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-md-6 col-md-offset-3">
    <div class="wrap">
            <div class="panel panel-default contact-us-form">
                <div class="panel-body">
                    <h2 class="title">Contact Us</h2>
                    <form action="">
                        <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 rows="4" class="form-control" placeholder="Message"></textarea>
                        </div>

                        <div class="form-group">
                            <label>
                                <input type="checkbox" />
                                Agree with terms & condition
                            </label>
                        </div>

                        <button type="submit" class="btn btn-lg submit-form">Submit</button>
                    </form>
                </div>
            </div>

            <div class="social">
                <ul class="list-unstyled">
                    <li><a href="http://www.twitter.com"><i class="fa fa-twitter-square"></i></a></li>
                    <li><a href="http://www.facebook.com"><i class="fa fa-facebook-square"></i></a></li>
                    <li><a href="http://www.linkedin.com"><i class="fa fa-linkedin-square"></i></a></li>
                    <li><a href="http://www.facebook.com"><i class="fa fa-google-plus-square"></i></a></li>
                </ul>
            </div>
    </div> <!-- /wrap -->
</div>

Upvotes: 1

Mohammad Usman

Reputation: 39332

You have added unnecessary position: relative and z-index properties on many elements. Remove all of them.
Add position: relative on the container having your social media div.
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>

Upvotes: 0

Aru

Reputation: 1870

Seems working fine, except you have given # inside href attribute, currently it is clickable, you have to provide proper url instead of the #

Fiddle Demo

Upvotes: 0

Hyperlink not clickable using position and z-index

Answers (3)

Related Questions