我正在创建这些叠加上一个和下一个箭头，就像本网站上的那些 - http://www.usatoday.com
问题是我保持固定，当我向下滚动页面时，箭头会随页面向上移动，你再也看不到它们了 . 奇怪的是，在Firefox中他们的工作并保持在最高位置：45％的位置：他们应该像往常一样固定 . 这是一个关于如何在ff中工作的截图：https://www.dropbox.com/s/2vsrv874c3urlqs/firefox.PNG
这里是铬：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);
}
2 回答
我使用了cjspurg方法，它起作用了 . 再次感谢！
根据这篇文章http://css-tricks.com/forums/topic/fixed-position-z-index-does-not-work-in-chrome/你可以't use Z-index on background images which could be part of the issue there'这个帖子的一个例子可以帮助你它也在这里：http://codepen.io/anon/pen/iKljy（你必须注册一个帐户才能看到它，但看起来它可以帮助你） .