Highlight the CSS stacking contexts on a page.
This has been incorporated in a small library.
How to use
Paste the content of the
stacking-contexts.js file into the browser's dev tools. Elements that (at least in theory) are stacking contexts will be highlighted with a red border / overlay. The elements'
title attribute will reflect the reason and the z-index.
Note: in a browser that does not support a certain CSS property — e.g. Safari with
contain — the property will not show up in the element's computed styles, so running this code in Safari will not highlight an object with
contain: content as a stacking context. Make sure to test in a variety of browsers to track down differences.