Determine which of two elements is in front of the other

Primary LanguageJavaScript


Determine which of two nodes appears in front of the other.


The stacking order rules are fairly complex. Determining whether node A will render in front of node B involves much more than comparing the z-index of the two nodes – you have to consider their parents, and which of them create new stacking contexts, which in turn depends on CSS properties like opacity, transform, mix-blend-mode and various others that you probably hadn't considered.

The tie-breaker, if that doesn't yield a conclusive answer, is the position in the document (with later nodes rendering in front of earlier nodes).


npm install --save stacking-order

...or grab a copy from npmcdn.com/stacking-order.


import { compare } from 'stacking-order';

const a = document.querySelector('.a');
const b = document.querySelector('.b');

const order = compare(a, b);
// -> `1` if a is in front of b, `-1` otherwise


It's entirely possible that the algorithm used here doesn't exactly match the spec. If you find a bug, please raise an issue after reading CONTRIBUTING.md. Thanks!



made by @rich_harris