Make a div display above all divs (Absolute positioning) - html

Question

When i click share button, div with social media icons (class="soc-icons") is displayed behind a div positioned below (class = "bioDivContainer").
HTML code
<div class="col-md-6 col-md-offset-3 quoteDiv col-xs-12">
<p id="quotes"></p>
<!--end of "quotes" p-->
<button class="btn btn-primary" id="getQuote" type="button">Get Quote</button>
<div class="like&share pull-right">
<span class="glyphicon glyphicon-heart social-but" data-placement="left" data-toggle="tooltip" title="Like the Quote"></span> <span class="glyphicon glyphicon-share" data-placement="left" data-toggle="tooltip" title="Share the Quote">
<div class="soc-icons">
<span><i class="fa fa-google-plus" aria-hidden="true"></i></span>
<span><i class="fa fa-facebook" aria-hidden="true"></i></span>
<span><i class="fa fa-instagram" aria-hidden="true"></i></span>
<span><i class="fa fa-vk" aria-hidden="true"></i></span>
</div>
</span>
<span><i aria-hidden="true" class="fa fa-twitter"
data-placement="left" data-toggle="tooltip" title=
"Tweet the Quote"></i></span>
</div>
</div>
<!--end of "col-md-6 col-md-offset-3" div-->
CSS Code
.soc-icons {
margin-top:20px;
position:absolute;
width:auto;
z-index:10;
height:auto;
border:1px solid transparent;
display:none;
background-color:white;
}
.soc-icons span {
display:inlnie;
}
What can i do to display div with soc-icons class above a div below.
Codepen link

Answer 1

Set the .quoteDiv {z-index: 1}