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

使用position：fixed

已修复：元素相对于浏览器窗口定位

可以找到更多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或任何您想要的内容

修复箭头图标的位置？

1 个答案: