src/aria/utils/overlay/Overlay.js
function (element, overlay) {
            // --------------------------------------------------- destructuring

            var window = Aria.$window;
            var document = window.document;
            var body = document.body;

            // ------------------------------------------------- local functions

            function getStyle(element, property) {
                return ariaUtilsDom.getStyle(element, property);
            }

            function getZIndex(element) {
                return getStyle(element, 'zIndex');
            }

            function createsANewStackingContext(element) {
                var zIndex = getZIndex(element);
                var position = getStyle(element, 'position');
                var opacity = getStyle(element, 'opacity');

                return (opacity < 1) || ((zIndex !== 'auto') && (position !== 'static'));
            }

            // ------------------------------------------------------ processing

            var zIndexToBeat = null;

            // building parent branch ------------------------------------------

            var ancestors = [];
            var currentElement = element;
            while (currentElement !== body && currentElement != null) {
                ancestors.unshift(currentElement);
                currentElement = currentElement.parentNode;
            }

            // checking parent branch ------------------------------------------
            // only the first (top-most) parent has to be taken into account, further children then being contained in its new stacking context

            for (var index = 0, length = ancestors.length; index < length; index++) {
                var potentialStackingContextRoot = ancestors[index];

                if (createsANewStackingContext(potentialStackingContextRoot)) {
                    zIndexToBeat = getZIndex(potentialStackingContextRoot);
                    break;
                }
            }

            // checking children if necessary ----------------------------------

            if (zIndexToBeat == null) {
                var getMax = function(values) {
                    return values.length === 0 ? null : Math.max.apply(Math, values);
                };

                var isANumber = function(value) {
                    return !isNaN(value);
                };

                var stackingContexts = [];

                var findChildrenCreatingANewStackingContext = function(root) {
                    var children = root.children;

                    for (var index = 0, length = children.length; index < length; index++) {
                        var child = children[index];

                        if (createsANewStackingContext(child)) {
                            stackingContexts.push(child);
                        } else {
                            findChildrenCreatingANewStackingContext(child);
                        }
                    }
                };

                findChildrenCreatingANewStackingContext(element);

                var zIndexes = [];
                for (var index = 0, length = stackingContexts.length; index < length; index++) {
                    var stackingContext = stackingContexts[index];

                    var currentZIndex = getZIndex(stackingContext);
                    if (isANumber(currentZIndex)) {
                        zIndexes.push(currentZIndex);
                    }
                }
                zIndexToBeat = getMax(zIndexes);
            }

            // final zindex application ----------------------------------------
            // Our overlay element is put at last in the DOM, so if there is no other stacking context found, there is no need to put a zIndex ourselves since the natural stacking order will apply.
            // However, still due to the natural stacking order applied within a same stacking context, there's no need to put a higher zIndex than the top-most stacking context's root, putting the same is sufficient

            if (zIndexToBeat !== null) {
                overlay.style.zIndex = '' + zIndexToBeat;
            }
        }
function (element, overlay) {
            // --------------------------------------------------- destructuring

            var window = Aria.$window;
            var document = window.document;
            var body = document.body;

            // ------------------------------------------------- local functions

            function getStyle(element, property) {
                return ariaUtilsDom.getStyle(element, property);
            }

            function getZIndex(element) {
                return getStyle(element, 'zIndex');
            }

            function createsANewStackingContext(element) {
                var zIndex = getZIndex(element);
                var position = getStyle(element, 'position');
                var opacity = getStyle(element, 'opacity');

                return (opacity < 1) || ((zIndex !== 'auto') && (position !== 'static'));
            }

            // ------------------------------------------------------ processing

            var zIndexToBeat = null;

            // building parent branch ------------------------------------------

            var ancestors = [];
            var currentElement = element;
            while (currentElement !== body && currentElement != null) {
                ancestors.unshift(currentElement);
                currentElement = currentElement.parentNode;
            }

            // checking parent branch ------------------------------------------
            // only the first (top-most) parent has to be taken into account, further children then being contained in its new stacking context

            for (var index = 0, length = ancestors.length; index < length; index++) {
                var potentialStackingContextRoot = ancestors[index];

                if (createsANewStackingContext(potentialStackingContextRoot)) {
                    zIndexToBeat = getZIndex(potentialStackingContextRoot);
                    break;
                }
            }

            // checking children if necessary ----------------------------------

            if (zIndexToBeat == null) {
                var getMax = function(values) {
                    return values.length === 0 ? null : Math.max.apply(Math, values);
                };

                var isANumber = function(value) {
                    return !isNaN(value);
                };

                var stackingContexts = [];

                var findChildrenCreatingANewStackingContext = function(root) {
                    var children = root.children;

                    for (var index = 0, length = children.length; index < length; index++) {
                        var child = children[index];

                        if (createsANewStackingContext(child)) {
                            stackingContexts.push(child);
                        } else {
                            findChildrenCreatingANewStackingContext(child);
                        }
                    }
                };

                findChildrenCreatingANewStackingContext(element);

                var zIndexes = [];
                for (var index = 0, length = stackingContexts.length; index < length; index++) {
                    var stackingContext = stackingContexts[index];

                    var currentZIndex = getZIndex(stackingContext);
                    if (isANumber(currentZIndex)) {
                        zIndexes.push(currentZIndex);
                    }
                }
                zIndexToBeat = getMax(zIndexes);
            }

            // final zindex application ----------------------------------------
            // Our overlay element is put at last in the DOM, so if there is no other stacking context found, there is no need to put a zIndex ourselves since the natural stacking order will apply.
            // However, still due to the natural stacking order applied within a same stacking context, there's no need to put a higher zIndex than the top-most stacking context's root, putting the same is sufficient

            if (zIndexToBeat !== null) {
                overlay.style.zIndex = '' + zIndexToBeat;
            }
        }
function ( element , overlay ) { // --------------------------------------------------- destructuring var window = Aria . $window ; var document = window . document ; var body = document . body ; // ------------------------------------------------- local functions function getStyle ( element , property ) { return ariaUtilsDom . getStyle ( element , property ) ; } function getZIndex ( element ) { return getStyle ( element , 'zIndex' ) ; } function createsANewStackingContext ( element ) { var zIndex = getZIndex ( element ) ; var position = getStyle ( element , 'position' ) ; var opacity = getStyle ( element , 'opacity' ) ; return ( opacity < 1 ) || ( ( zIndex !== 'auto' ) && ( position !== 'static' ) ) ; } // ------------------------------------------------------ processing var zIndexToBeat = null ; // building parent branch ------------------------------------------ var ancestors = [ ] ; var currentElement = element ; while ( currentElement !== body && currentElement != null ) { ancestors . unshift ( currentElement ) ; currentElement = currentElement . parentNode ; } // checking parent branch ------------------------------------------ // only the first (top-most) parent has to be taken into account, further children then being contained in its new stacking context for ( var index = 0 , length = ancestors . length ; index < length ; index ++ ) { var potentialStackingContextRoot = ancestors [ index ] ; if ( createsANewStackingContext ( potentialStackingContextRoot ) ) { zIndexToBeat = getZIndex ( potentialStackingContextRoot ) ; break ; } } // checking children if necessary ---------------------------------- if ( zIndexToBeat == null ) { var getMax = function ( values ) { return values . length === 0 ? null : Math . max . apply ( Math , values ) ; } ; var isANumber = function ( value ) { return ! isNaN ( value ) ; } ; var stackingContexts = [ ] ; var findChildrenCreatingANewStackingContext = function ( root ) { var children = root . children ; for ( var index = 0 , length = children . length ; index < length ; index ++ ) { var child = children [ index ] ; if ( createsANewStackingContext ( child ) ) { stackingContexts . push ( child ) ; } else { findChildrenCreatingANewStackingContext ( child ) ; } } } ; findChildrenCreatingANewStackingContext ( element ) ; var zIndexes = [ ] ; for ( var index = 0 , length = stackingContexts . length ; index < length ; index ++ ) { var stackingContext = stackingContexts [ index ] ; var currentZIndex = getZIndex ( stackingContext ) ; if ( isANumber ( currentZIndex ) ) { zIndexes . push ( currentZIndex ) ; } } zIndexToBeat = getMax ( zIndexes ) ; } // final zindex application ---------------------------------------- // Our overlay element is put at last in the DOM, so if there is no other stacking context found, there is no need to put a zIndex ourselves since the natural stacking order will apply. // However, still due to the natural stacking order applied within a same stacking context, there's no need to put a higher zIndex than the top-most stacking context's root, putting the same is sufficient if ( zIndexToBeat !== null ) { overlay . style . zIndex = '' + zIndexToBeat ; } }
Apply a zIndex to the overlay

<p>Resources: </p>
<ul>
<li><a href="http://www.cssmojo.com/everything_you_always_wanted_to_know_about_z-index_but_were_afraid_to_ask/">Find out how elements stack and start using low z-index values</a></li>
<li><a href="https://philipwalton.com/articles/what-no-one-told-you-about-z-index/">What No One Told You About Z-Index — Philip Walton</a></li>
</ul>
@param {HTMLElement} element Reference zIndex
@param {HTMLElement} overlay DOM element of the overlay
@protected
Apply a zIndex to the overlay