Skip to content

Instantly share code, notes, and snippets.

@tanthammar

tanthammar/always-on-top.js

Created May 14, 2021 17:31
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tanthammar/af0c372f05058daa96b662185b5f2f40 to your computer and use it in GitHub Desktop.
Save tanthammar/af0c372f05058daa96b662185b5f2f40 to your computer and use it in GitHub Desktop.
Download ZIP
JS Get highest z-index, always on top
Raw
always-on-top.js
window.findHighestZ = () => [...document.querySelectorAll('body *')]
.map(elt => parseFloat(getComputedStyle(elt).zIndex))
.reduce((z, highest=Number.MIN_SAFE_INTEGER) =>
isNaN(z) || z < highest ? (isNaN(highest) ? 1 : highest) : z
)
//vanilla
document.getElementById("foo").style.zIndex = window.findHighestZ()
//alpine
this.$refs.foo.style.zIndex = window.findHighestZ()
@tanthammar
Copy link
Author

Use it for menus, layering multiple modals, notifications etc

@tanthammar
Copy link
Author

Recommend to add style="isolation: isolate" to the outmost container. (TailwindCSS class="isolate")
https://www.joshwcomeau.com/css/stacking-contexts/#creating-stacking-contexts

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment