CODEWITHSUNDEEP
javascriptjqueryhtmlcssfullpage.js
Mackey18
Mackey18

Reputation: 2352

Z-Index on Fixed element outside of FullPage.js

I'm trying to create what I think would be a cool content effect, whereby a dark semi-transparent background covers the entire screen while certain content rises above it, thus creating a highlight effect. I'm a massive JS amateur but I've been using fullPage.js (https://github.com/alvarotrigo/fullPage.js/) to create a scrolling content area, and also used a small drop down jQuery within the FullPage. I set up a function to bring my darkness div to the foreground, and it covers the entire screen as I expected, however, the drop down list within the fullPage simply won't rise above it, no matter what I try.

CSS of the darkness div:

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

This is my JS function: 

function thedarkside () {

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

All of that works as intended. However I can't get my drop down #dd to have a z-index higher than darkness div. This is the general structure of the FullPage.js:

Darkness -->
<-- Darkness

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

I set the z-index of drop down to something ridiculous like 100, as I don't want any of the other elements to be above the darkness div. I really only want Dropdownto be above. Anyway if anyone could help me achieve this affect I'd really appreciate it. I'm ok if the solution lies in JS as opposed to CSS.

Thanks,
Mike

Upvotes: 0

Views: 1905

Answers (1)

Mackey18
Mackey18

Reputation: 2352

It took the JSFiddles for me to discover why it wasn't happening. I had to turn off the css3 flag on start of the FullPage.js and now it works.

Hope this helps anyone else who experiences something similar.

Upvotes: 1

Related Questions