文章/答案/技术大牛

发布

社区首页 >问答首页 >FullPage.js外部的固定元素上的Z索引

问FullPage.js外部的固定元素上的Z索引
EN

Stack Overflow用户

提问于 2014-07-09 23:48:25

回答 1查看 1.8K关注 0票数 0

我正在尝试创建一种我认为会很酷的内容效果，即一个暗色的半透明背景覆盖整个屏幕，而某些内容则上升到屏幕上方，从而产生高亮效果。我是一名JS业余爱好者，但我一直在使用fullPage.js (https://github.com/alvarotrigo/fullPage.js/)创建滚动内容区，还在FullPage中使用了一个小的下拉jQuery。我设置了一个函数来将我的黑暗div带到前台，正如我所预期的那样，它覆盖了整个屏幕，然而，无论我怎么尝试，fullPage中的下拉列表都不会升到它上面。

黑暗的CSS div：

#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);
}

所有这些都能达到预期效果。然而，我不能让我的drop拥有比z-index更高的div。这是FullPage.js的一般结构

Darkness -->
<-- Darkness

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

我将down的z-index设置为可笑的值，比如100，因为我不想让任何其他元素都在down div之上。我真的只想让Dropdown在上面。无论如何，如果有人能帮助我实现这个效果，我将非常感激。如果解决方案在JS中而不是CSS中，我可以接受。

谢谢,

麦克

jquery

html

css

fullpage.js

javascript

回答 1

Stack Overflow用户

发布于 2014-07-10 01:02:10

直到JSFiddles我才发现为什么它没有发生。我不得不在FullPage.js启动时关闭css3标志，现在它可以工作了。

希望这对其他有类似经历的人有所帮助。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24658232

复制

相似问题

问FullPage.js外部的固定元素上的Z索引
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问FullPage.js外部的固定元素上的Z索引EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问FullPage.js外部的固定元素上的Z索引
EN