dom-zindex

z-index Manager

English | 简体中文

Web common z-index style management.

Browser Support

7+ ✔	80+ ✔	44+ ✔	40+ ✔	60+ ✔	6+ ✔

Installing

npm install dom-zindex

CDN

<script src="https://unpkg.com/dom-zindex"></script>

Example 1

import domZIndex from 'dom-zindex'

// Gets the largest z-index on the page.
domZIndex.getMax()

// Set main current z-index.
domZIndex.setCurrent(1000)

// Get main current z-index.
domZIndex.getCurrent() // 1000

// Get main next z-index.
domZIndex.getNext() // 1001

// Get subordinate current z-index, the secondary z-index will always be greater than the primary z-index.
domZIndex.getSubCurrent() // 2001

// Get subordinate next z-index.
domZIndex.getSubNext() // 2002

Example 2

import domZIndex from 'dom-zindex'

// If the incoming z-index is less than global, the next one is automatically fetched.
let currZIndex1 = 888
currZIndex1 = domZIndex.getCurrent(currZIndex1) // 1000

// If the z-index is greater than the global value, the value is returned.
let currZIndex2 = 2000
currZIndex2 = domZIndex.getCurrent(currZIndex2) // 1500

Css var

Using css variables.

• --dom-main-z-index be equivalent to getCurrent()
• --dom-sub-z-index be equivalent to getSubCurrent()

.my-popup {
  z-index: var(--dom-main-z-index);
}
.my-msg {
  z-index: var(--dom-sub-z-index);
}

Contributors

Thank you to everyone who contributed to this project.

License

MIT © 2019-present, Xu Liangzhan