位置固定在Chrome中不起作用

问题描述

我正在建立这些重叠的上一个和下一个箭头，像这个网站上的箭头一样 -

I'm creating these overlay previous and next arrows, like the ones on this website - http://www.usatoday.com

我遇到的问题是在Chrome中，箭头不会保持固定，当我向下滚动页面箭头上升该页面，您不能再看到它们了。奇怪的是，在Firefox中他们工作并保持在顶部：45％的位置：固定的所有的时间，他们应该。
下面是它在ff中的工作原理的屏幕截图：

And the problem I'm getting is in Chrome, the arrows won't stay fixed, when I scroll down the page the arrows go up with the page and you can't see them anymore. The weird thing is that in Firefox they work and stay at top: 45% position: fixed all the time like they should.Here is a screenshot on how it works in ff: https://www.dropbox.com/s/2vsrv874c3urlqs/firefox.PNG

这里是chrome：

and here is chrome: https://www.dropbox.com/s/zgr2zhkcnohykgj/chrome.PNG

箭头的HTML：

 <div class="overlay-arrows">
        <div class="front-arrow-wrapper">
            <a href="#" rel="prev" class="prev-link">
                <div class="prev-icon">
                </div>
                <div class="prev-overlay">
                    <span class="categ-next">Category for prev</span>
                    <p>Title of the post for prev</p>
                </div>
            </a>
            <a href="#" rel="next" class="next-link" >
                <div class="next-icon">
                </div>
                <div class="next-overlay">
                    <span class="categ-next">Category for next</span>
                    <p>Title of the post for next</p>
                </div>
            </a>
        </div> <!--end .front-arrow-wrapper -->
    </div> <!--end overlay-arrows -->

和CSS：

.overlay-arrows{
    position: fixed;
    top: 45%;
    left: 0;
    width: 100%;
    z-index: 9999;
    overflow: visible;
}
.front-arrow-wrapper{
width: 1104px;
position: relative;
margin: 0 auto;
}
.prev-link{
left: 0;
float: left;
text-decoration: none;
}
.next-link{
right: 0;
float: right;
text-decoration: none;
}
.prev-icon{
  background: url(../img/prev.png) 100% 0 no-repeat;
  height: 77px;
  width: 45px;
float: left;
}
.next-icon{
  background: url(../img/next.png) 100% 0 no-repeat;
  height: 77px;
float: right;
  width: 45px;
}
.next-overlay, .prev-overlay{
opacity: 0;
filter: alpha(opacity=0);
width: 250px;
width: 250px;
height: 77px;
color: #F16C14;
background: rgba(0, 0, 0, 0.7);
font-size: 14px;
font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
}
.next-link:hover>.next-icon{
-webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  background: url(../img/next-hover.png) 100% 0 no-repeat;
}
.next-link:hover>.next-overlay{
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  opacity: 10;
  filter: alpha(opacity=100);
}

推荐答案

我使用cjspurg方法工作。再次感谢！

I used cjspurg method and it worked. Thanks again!

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);

这篇关于位置固定在Chrome中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！