修复箭头（img）prev和next

Question

<div>
   header
</div>
<div>
   sidebar
</div>
<div>
   content

   <a href="#"><img src="prev.png"></a>
   <a href="#"><img src="next.png"></a>

</div>

如何将div内容中心的箭头固定在右侧和左侧？

http://jsfiddle.net/shvj40ta/embedded/result/

解

下面的问题让我了解了覆盖：

How to override "inherited" z-indexes?

我把z-index放在div箭头中，而不是在子div中

在用户@justinas的帮助下，我得到了解决方案

http://jsfiddle.net/gislef/3by7r0ek/1/

Answer 1

用css＆＃39;位置：绝对;最高：50％; margin-top： - （height / 2）＆＃39;;

＆＃13;

＆＃13;

.wrapper {
  background-color: rgba(0, 0, 0, .2);
  position: relative;
  margin: 10px auto;
  height: 200px;
  width: 300px;
}
.left,
.right {
  width: 0;
  height: 0;
  border: 20px solid transparent;
  position: absolute;
  top: 50%;
  /* actual height is 40 */
  margin-top: -20px;
}
.left {
  border-right-color: black;
  left: 5px;
}
.right {
  border-left-color: black;
  right: 5px;
}

＆＃13;

<div class="wrapper">
  <div class="left"></div>
  <div class="right"></div>
</div>

＆＃13;

＆＃13;

＆＃13;