Given a node, returns the closest stacking context.

StackingContext.js

function getClosestStackingContext( node ) {
    if( ! node || node.nodeName === 'HTML' ) {
        console.log( node, 'has stacking context, reason: root' );
        return document.documentElement;
    }
    const computedStyle = getComputedStyle( node );
    if ( computedStyle.position === 'fixed' ) {
        console.log( node, 'has stacking context, reason: position: fixed' );
        return node;
    } else if ( computedStyle.zIndex !== 'auto' && computedStyle.position !== 'static' ) {
        console.log( node, `has stacking context, reason: zindex: ${ computedStyle.zIndex } and position: ${ computedStyle.position }` );
        return node;
    } else if ( computedStyle.opacity !== '1' ) {
        console.log( node, `has stacking context, reason: opacity: ${ computedStyle.opacity }` );
        return node;
    } else if ( computedStyle.transform !== 'none' ) {
        console.log( node, `has stacking context reason: transform: ${ computedStyle.transform }` );
        return node;
    } else if ( computedStyle.mixBlendMode !== 'normal' ) {
        console.log( node, `has stacking context, reason: mix-blend-mode: ${ computedStyle.mixBlendMode }`);
        return node;
    } else if ( computedStyle.filter !== 'none' ) {
        console.log( node, `has stacking context, reason: filter: ${ computedStyle.filter }` );
        return node;
    } else if ( computedStyle.isolation === 'isolate' ) {
        console.log( node, 'has stacking context, reason: isolation: isolate' );
        return node;
    } else if ( computedStyle.webkitOverflowScrolling === 'touch' ) {
        console.log( node, 'has stacking context, reason: -webkit-overflow-scrolling: touch' );
        return node;
    } else {
        return getClosestStackingContext( node.parentNode );
    }
}

const node = document.querySelector( '.my-component' );
getClosestStackingContext( node ); //should return itself if it has created a stacking context
getClosestStackingContext( node.parentNode ); //returns the parent stacking context