z-index 管理器

English | 简体中文

Web 通用的 z-index style 管理器

Browser Support

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

安装

npm install dom-zindex

CDN

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

示例 1

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

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()

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

License

MIT © 2019-present, Xu Liangzhan