Search code examples
cssdrop-down-menuz-index

Z-index in Embeded Mailing List Code

I have a pop up window for signing up for our mailing list. I need it to overlay everything. Currently the css menu sits on top of the pop up. The menu is 9999 on the z index. Where in the pop up code (see below) do I add z index info.

This is the code from Mail Chimp:

    <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
    <script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) 
    {
         L.start({"baseUrl":"mc.us9.list-manage.com","uuid":"56eb37539d1e217bbc3a2ea22","lid":"d8e88803f2"}) 
    })
    </script>
Solution

  • You really need to post your HTML and CSS to get a definitive answer on this, but you can try the following:

    Make sure your popup overlay has a classname or ID. For example:

    <div id-"mailing-list-overlay">
    mailing list form goes here...
</div>

    Now try adding this CSS rule somewhere in your markup:

    <style>
    #mailing-list-overlay {
        z-index: 10000 !important;
    }
</style>

    If that works, great! Now try removing the '!important' and see if that works. (Make sure your browser cache is cleared when you reload.) If that works, then try moving the css rule to the proper stylesheet.

    If none of these things work, it's possible you have a different issue -- for example, the overlay might not be in the same layer stack as the content you want to overlay. But that would impossible to troubleshoot without being able to see a more complete picture of the HTML and CSS. I can help you if you post your code on pastebin or jsfiddle.