修復箭頭圖標的位置？

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