Web common z-index style management
npm install dom-zindexshell
npm install dom-zindex
`
$3
`HTML
`
示例 1
`javascript
import domZIndex from 'dom-zindex'
// 获取页面中最大的 z-index
domZIndex.getMax()
// 设置当前 z-index
domZIndex.setCurrent(1000)
// 获取当前 z-index
domZIndex.getCurrent() // 1000
// 获取下一级 z-index
domZIndex.getNext() // 1001
// 获取次要的当前 z-index，次要的 z-index 始终会大于主要的 z-index
domZIndex.getSubCurrent() // 2001
// 获取次要的下一级 z-index
domZIndex.getSubNext() // 2002
`
示例 2
`javascript
import domZIndex from 'dom-zindex'
// 如果传入 z-index 小于全局，则自动获取下一个
let currZIndex1 = 999
currZIndex1 = domZIndex.getCurrent(currZIndex1) // 1000
// 如果传入 z-index 大于全局，则返回传入值
let currZIndex2 = 1500
currZIndex2 = domZIndex.getCurrent(currZIndex2) // 1500
`
使用 CSS 变量
* 内置以下变量
* `--dom-main-z-index` 等于 `getCurrent`()
* `--dom-sub-z-index` 等于 `getSubCurrent`()
`css
.my-popup {
z-index: var(--dom-main-z-index);
}
.my-msg {
z-index: var(--dom-sub-z-index);
}
``