Fullpage.js 覆盖元素的 z-index

Question

我在使用 fullpage.js 时遇到了一个非常棘手的问题，这是一个为您提供整页滑块的库。我希望滑块包含带有标题 (h1) 的背景图像。此外，在背景和标题之间，我想放置一个透明图像作为叠加层，不会滑动（具有绝对位置）。

尽管我可以通过将 z-index 设置为 2 来将标题移动到覆盖层上方，但 full page.js 添加了 -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px) 滑动到滑块容器，从而忽略 z 值并将标题移动到叠加层后面。

我尝试过 transform-style: flat; （就像他们在这里建议的那样：css z-index lost after webkit transform translate3d），但这对我不起作用。

原来我不是唯一一个遇到这个问题的人 (https://stackoverflow.com/questions/27179052/fullpage-js-z-index-lost-after-css3-enabled)。

有人知道如何解决这个问题吗？

谢谢！

Answer 1

只需添加变换： translate3d(0,0,1px);到受影响的元素。