Hyperlink not clickable using position and z-index - html

Question

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;
}

Answer 1

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><i class="fa fa-twitter-square"></i></li>
<li><i class="fa fa-facebook-square"></i></li>
<li><i class="fa fa-linkedin-square"></i></li>
<li><i class="fa fa-google-plus-square"></i></li>
</ul>
</div>
</div> <!-- /wrap -->
</div>

Answer 2

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>

Answer 3

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