修复箭头图标的位置？

Question

可能是这个问题问过百次，但我能不能弄清楚什么我做错了

<div id="myNav" class="overlay" style="height: 100%; width: 100%;"> 

<div class="pdf-navigation"> 

<a class="navigator previousbtn" href="1"> 

<span class="glyphicon glyphicon-circle-arrow-left" style="float:left;font-size:30px;color:#eee;margin-top:25%;z-index:3"> 

</span> </a> 

<a class="navigator nextbtn" href="3"> 

<span class="glyphicon glyphicon-circle-arrow-right" style="float:right;font-size:30px;color:#eee;opacity:1;margin-top:25%;z-index:3"> 

</span></a> 

/// pdf will loaded here in overlay screen 

</div> 

CSS

.glyphicon-circle-arrow-left { 

    float: left; 
    font-size: 30px; 
    color: #eee; 
    margin-top: 25%; 
    z-index: 3; 
} 

.glyphicon-circle-arrow-right { 

    float: right; 
    font-size: 30px; 
    color: #eee; 
    opacity: 1; 
    margin-top: 25%; 
    z-index: 3; 


} 

什么发生的是当我滚动PDF这些导航图标也滚动我想让他们固定。我该如何实现这一目标？

我试图相对于父DIV位置和绝对的儿童跨越...

Answer 1

使用位置：固定

固定：元素相对于浏览器窗口

定位更多可以发现here

最好的做法是将所有控件/图标包装在一个div集合的位置固定。

---

这里有一个JSFiddle

分度pdf-navigation类是对所有与固定的位置，把它里面的控件。

.pdf-navigation { 
    height: 100%; 
    width: 100%; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    z-index: 999999; 
} 

加载PDF或任何你想要的内容的DIV中与ID content