在所有 div 上方制作一个 div 显示（绝对定位）

Question

当我点击分享按钮时，带有社交媒体图标 (class="soc-icons") 的 div 会显示在位于下方的 div 后面 (class= "bioDivContainer")。

HTML 代码

     <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 代码

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

如何在下面的 div 上方显示具有 soc-icons 类的 div。

Codepen link

Answer 1

设置.quoteDiv {z-index: 1}