放置问题左右箭头在滑块下方使用字体-awesome

Question

我想创建如下图片:

https://i.stack.imgur.com/crywo.jpg

我不能把这些箭头(fa-angle-left)放在图像上，因为它在滑块上。我尝试了position: absolute和relative。

这是我的代码，箭头可能不工作，因为我使用font-awesome。

#top_header {
  background-image: url(http://i.imgur.com/wCDfIxa.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  .slider_wrapper {
    width: 100%;
    background-color: red;
    overflow: hidden;
    img {
      width: 100%;
      border: 0;
      padding: 4em 0;
    }
    a {
      .fa-angle-left, .fa-angle-right {
        font-size: 80px;
        color: yellow;
      }
      .fa-angle-left {
        float: left;
      }
      .fa-angle-right {
        float: right;
      }
    }
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<section id="top_header" class="clearfix">
  <div class="wrapper">
    <div class="slider_wrapper">
      <img src="http://i.imgur.com/bPbklqm.png" alt="">
      <a href="#"><span class="fa fa-angle-left"></span></a>
      <a href="#"><span class="fa fa-angle-right"></span></a>
    </div>
  </div>
</section>

Answer 1

* {
  box-sizing: border-box;
}
html,
body {
  font-family: 'Open Sans', sans-serif;
}
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.wrapper {
  max-width: 90%;
  margin: 0 auto;
}
/**  - - - - - - - - - - Top Header - - - - - - - - - - **/
#top_header {
  background-image: url(http://i.imgur.com/wCDfIxa.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}
.slider_wrapper {
  max-width: 100%;
  overflow: hidden;
}
img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
  border: 0;
  padding-bottom: 2em;
}
.fa-angle-left,.fa-angle-right {
  font-size: 40px !important;/*Dont use !important when you working on  different style sheet */
  color: white;
  position:absolute;
   margin-top:22.5%;
}
.fa-angle-left {
left:7%;
}
.fa-angle-right {
  right:7%;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
 <section id="top_header" class="clearfix">
  <div class="wrapper">
    <div class="slider_wrapper">
      <a href="#"><span class="fa fa-angle-left "></span></a>
      <a href="#"><span class="fa fa-angle-right"></span></a>
      <img src="http://i.imgur.com/bPbklqm.png" alt="">
    </div>
    <!--slider_wrapper End-->
  </div>
</section>
    <!--slider_wrapper End-->
  </div>
</section>