How To Debug The Stack Of Elements via Edge Dev Tools

1
  function createsStackingContext(el) {
2
    const cs = getComputedStyle(el);
3
    const pos = cs.position;
4
    const z = cs.zIndex;
5
    const will = (cs.willChange || '').split(',').map(s => s.trim());
6
    return (
7
      (['relative','absolute','sticky','fixed'].includes(pos) && z !== 'auto') ||
8
      pos === 'fixed' ||
9
      parseFloat(cs.opacity) < 1 ||
10
      cs.transform !== 'none' ||
11
      cs.filter !== 'none' ||
12
      cs.perspective !== 'none' ||
13
      cs.mixBlendMode !== 'normal' ||
14
      cs.isolation === 'isolate' ||
15
      cs.clipPath !== 'none' ||
16
      cs.backdropFilter !== 'none' ||
17
      (cs.contain && cs.contain.includes('paint')) ||
18
      will.some(p => ['transform','opacity','filter','perspective','clip-path','backdrop-filter'].includes(p))
19
    );
20
  }
21

22
  function stackingChain(el) {
23
    const chain = [];
24
    let node = el;
25
    while (node && node.nodeType === 1) {
26
      const cs = getComputedStyle(node);
27
      chain.push({
28
        el: node,
29
        tag: node.tagName.toLowerCase() + (node.id ? '#' + node.id : ''),
30
        classes: node.className || '',
31
        zIndex: cs.zIndex,
32
        position: cs.position,
33
        opacity: cs.opacity,
34
        transform: cs.transform,
35
        filter: cs.filter,
36
        perspective: cs.perspective,
37
        mixBlendMode: cs.mixBlendMode,
38
        isolation: cs.isolation,
39
        clipPath: cs.clipPath,
40
        contain: cs.contain,
41
        createsSC: createsStackingContext(node)
42
      });
43
      node = node.parentElement;
44
    }
45
    return chain;
46
  }
47

48
  // Usage: select an element in Elements panel, then run:
49
  const $1chain = stackingChain($0); // $0 is the currently selected element
50
  console.table($1chain, ['tag','classes','position','zIndex','opacity','transform','filter','contain','createsSC']);