Skrollr：褪色图像跳到z-index的顶部

Question

我有一些图像正常滚动，一些重叠的div创建了一个蒙版效果。 它工作正常，但我想淡入滚动图像。一旦我添加不透明度动画，渐变图像就会跳到z-index堆栈的顶部，直到它达到不透明度：1＆amp;然后它跳回到正常的z指数。 这是page in question。

屏蔽图像的3个三角形形状属于#skrollr-body外的固定定位导航栏（推荐）

<div class="tri6"></div>
<div class="tri7"></div>
<div class="tri8"></div>

＆安培;它们位于滚动图像所在的右列上。

<div class="page_photo" data-400="opacity: 0;" data-700="opacity: 1;">
<img src="photos/fight1.jpg">
<img src="photos/neutron4.jpg">
<img src="photos/indi.jpg">
<img src="photos/taxi.jpg">
<img src="photos/planet1.jpg">
</div>

我将图像的z-index设置为-1＆amp;掩码div为500，但这不是解决方案。不确定如何继续 - 任何建议？

澄清：访问链接的网站，向下滚动。你会看到一个战斗的人的大图像。当该图像滚动时，将出现3个白色三角形。他们应该始终处于最佳状态。不是动画不透明效果的背后。

Answer 1

好的，我想我明白了。问题是三角形的容器没有应用z-index。

尝试将col1 div的样式更改为：

.col1 {
float: left;
width: 20%;
min-width: 12em;
padding-top: 1em;
position: relative;
z-index: 9999;
}

如果可以，请告诉我。