2017-03-04 11 views
0

この質問は百倍の前に求められることがありますが、私はできない私が間違っ矢印アイコンの位置を固定しますか?

<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との相対位置を試してみましたが、子供に絶対は...

答えて

0

使用位置にまたがる:固定

を固定:要素が

ブラウザウィンドウに関連して配置されていますもっと見ることができますhere

ベストプラクティスはdiv内のすべてのコントロール/アイコンをその位置を 一定。


ここpdf-navigationクラスとJSFiddle

divがその中にあなたのコントロールを配置、固定位置を持つすべての上でいます。

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

ID content

+0

であなたのPDFを読み込むか、あなたはdivの内側に好きなコンテンツを、私はあまりにもが、右の矢印は、あなたがjsfiddleを提供することができます –

+0

左矢印と重なっていることを試してみましたか?私はglyphiconsへのアクセスを持っていません –

+0

pdfがロードされる必要があるとして作業フィドルを作成できませんでした –