Javascript FullPage.js之外的固定元素上的Z索引

我正试图创造一种我认为很酷的内容效果，在这种效果下，一个黑暗的半透明背景覆盖整个屏幕，而某些内容在其上方升起，从而创造出一种高光效果。我是一个巨大的

JS

业余爱好者，但我一直在使用

fullPage.JS

（）创建一个滚动内容区域，并且在

fullPage

中使用了一个小的下拉菜单

jQuery

。我设置了一个函数，将我的黑暗

div

带到前台，它像我预期的那样覆盖了整个屏幕，但是，无论我做什么尝试，

fullPage

中的下拉列表都不会超出它

黑暗部门的CSS：

#darkness {
background:rgba(0, 0, 0, 0.5);
display:none;
height:100%;
left:0;
position: fixed;
top:0;
width:100%;
z-index:10;
}

这是我的JS函数：

function thedarkside () {

    console.log ('the dark side');
    $('#darkness').fadeTo(200, 1);
}

所有这些都按预期进行。但是，我无法使我的下拉列表

#dd

的z索引高于黑暗div。这是

FullPage.js

的一般结构：

Darkness -->
<-- Darkness

    Fullpage -->
        Section -->
            Form -->
                Dropdown -->
                <-- Dropdown
            <-- Form
        <-- Section
    <--Fullpage

黑暗-->
节-->
表格-->
下拉菜单-->
我花了很多时间才发现为什么没有发生。我不得不在
FullPage.js
开始时关闭
css3
标志，现在它可以工作了

希望这能帮助其他有类似经历的人。
你能为此创建一个plank或jsbin或jsiddle吗？那我很乐意帮忙。@PeterAronZentai当然，只是我不完全确定如何使用这么多不同的jquery，给我几分钟时间。这可能是因为您没有使用最新的fullpage.js（2.X）和插件包装器。如果使用它，只需在包装器外放置一个固定元素即可正常工作。否则，使用
fixedElements
选项也可以解决问题。@Alvaro您好，我使用的是
fullPage V2.1.5
，我在
darkness
div上使用了
fixedElements
。我不知道您的div，我只是说，为了避免固定元素出现问题，您应该执行与fullpage.js中的示例完全相同的操作：（您可以看到它的源代码）