修复箭头（img）上一个和下一个

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/

---

SOLUTION

问题下面让我了解到大约覆盖：

How to override "inherited" z-indexes?

我把Z-指数DIV箭头，而不是在孩子的div

随着用户@justinas的帮助下，我得到了解决

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

Answer 1

用CSS的立场：绝对的;顶部：50％; margin-top： - （height/2）';

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

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