95 lines
3.3 KiB
Markdown
95 lines
3.3 KiB
Markdown
# z-index Manager
|
|
|
|
English | [简体中文](README.zh-CN.md)
|
|
|
|
[](https://www.npmjs.com/package/dom-zindex)
|
|
[](https://npm-stat.com/charts.html?package=dom-zindex)
|
|
[](https://github.com/x-extends/dom-zindex/issues)
|
|
[](https://github.com/x-extends/dom-zindex/issues?q=is%3Aissue+is%3Aclosed)
|
|
[](https://github.com/x-extends/dom-zindex/pulls)
|
|
[](https://github.com/x-extends/dom-zindex/pulls?q=is%3Apr+is%3Aclosed)
|
|
[](LICENSE)
|
|
|
|
Web common z-index style management.
|
|
|
|
## Browser Support
|
|
|
|
 |  |  |  |  | 
|
|
--- | --- | --- | --- | --- | --- |
|
|
7+ ✔ | 80+ ✔ | 44+ ✔ | 40+ ✔ | 60+ ✔ | 6+ ✔ |
|
|
|
|
## Installing
|
|
|
|
```shell
|
|
npm install dom-zindex
|
|
```
|
|
|
|
## CDN
|
|
|
|
```HTML
|
|
<script src="https://unpkg.com/dom-zindex"></script>
|
|
```
|
|
|
|
## Example 1
|
|
|
|
```javascript
|
|
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
|
|
|
|
```javascript
|
|
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
|
|
|
|
* Built-in following variables
|
|
* ```--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);
|
|
}
|
|
```
|
|
|
|
## Contributors
|
|
|
|
Thank you to everyone who contributed to this project.
|
|
|
|
[](https://github.com/x-extends/dom-zindex/graphs/contributors)
|
|
|
|
## License
|
|
|
|
[MIT](LICENSE) © 2019-present, Xu Liangzhan
|