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

Question

我有一些图像正常滚动，一些叠加 div 创建了遮罩效果。它工作正常，但我想淡入滚动图像。一旦我添加不透明度动画，淡入淡出的图像就会跳到 z-index 堆栈的顶部，直到它达到 opacity:1 & 然后它跳回到它的正常 z-index。这是 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 并将遮罩 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;
}

让我知道这是否有效。

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

Skrollr: fading image jumping to top of z-index

html

javascript

css

skrollr