layercake-js

A deliciously automated z-index manager

Usage no npm install needed!

<script type="module">
  import layercakeJs from 'https://cdn.skypack.dev/layercake-js';
</script>

README

Layercake.js

npm version minified size gzipped size hits per month gzipped size share on twitter

Demo

Layercake.js

Layercake.js is a zero dependency javascript plugin that automatically manages the z-index css property of the elements on your page based on user interaction (mutations to the DOM). Layercake.js will determine which element should have the higher z-index and increment/decrement it accordingly.

Installation

Include the following script before the closing </body> tag:

<script src="https://cdn.jsdelivr.net/npm/layercake-js@latest/dist/layercake.min.js"></script>

Usage

Add the data-layercake-layer data attribute, as well as a position property of absolute, relative or fixed to each html element you want to be managed by Layercake.js.

Note: Elements with CSS computed properties of display: none; or visibility: hidden; will not be tracked by Layercake.js.

Example:

<style>
  #popup {
    position: absolute;
  }
</style>

<div id="popup" data-layercake-layer>
  Hi! I am a popup overlay managed by Layercake.js!
</div>