html - 固定箭头图标的位置？

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 的位置和相对于子 span 的绝对位置...

Answer 1

使用位置:固定

fixed: The element is positioned relative to the browser window

更多可以找到here

最佳做法是将所有控件/图标包装在一个 div 中，并将其位置设置为固定。

---

这是一个 JSFiddle

带有 pdf-navigation 类的 div 是固定位置的，把你的控件放在里面。

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

使用 id content 在 div 中加载您的 PDF 或您想要的任何内容