我试图创造我认为很酷的内容效果，即黑暗的半透明背景覆盖整个屏幕，同时某些内容高于它，从而产生高光效果。我是JS业余爱好者，但我一直在使用fullPage.js（https://github.com/alvarotrigo/fullPage.js/）来创建滚动内容区域，并且还使用了一个小的下拉列表{{1}在jQuery内。我设置了一个功能，将我的黑暗FullPage带到前台，它按照我的预期覆盖整个屏幕，然而，div中的下拉列表只是不会超过它，无论我尝试什么。
黑暗div的CSS：
fullPage这是我的JS功能：
#darkness {
background:rgba(0, 0, 0, 0.5);
display:none;
height:100%;
left:0;
position: fixed;
top:0;
width:100%;
z-index:10;
}
所有这些都按预期工作。但是，我无法让我的下拉function thedarkside () {
console.log ('the dark side');
$('#darkness').fadeTo(200, 1);
}
得到高于黑暗div的#dd。这是z-index：
FullPage.js我将Darkness -->
<-- Darkness
Fullpage -->
Section -->
Form -->
Dropdown -->
<-- Dropdown
<-- Form
<-- Section
<--Fullpage
的下拉设置为像100这样荒谬的东西，因为我不希望任何其他元素高于黑暗div。我真的只希望z-index超越。无论如何，如果有人能帮助我实现这种影响，我真的很感激。如果解决方案位于Dropdown而不是JS，我可以。
谢谢，
麦克
答案 0 :(得分：1)
我花了JSFiddles来发现它为什么没有发生。我必须在css3开头关闭FullPage.js标记，现在它可以正常工作。
希望这有助于其他体验类似事物的人。