项目原始demo,不改动
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
此仓库已存档。您可以查看文件和克隆,但不能推送或创建工单/合并请求。

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. # [postcss][postcss]-zindex [![Build Status](https://travis-ci.org/ben-eb/postcss-zindex.svg?branch=master)][ci] [![NPM version](https://badge.fury.io/js/postcss-zindex.svg)][npm] [![Dependency Status](https://gemnasium.com/ben-eb/postcss-zindex.svg)][deps]
  2. > Reduce z-index values with PostCSS.
  3. ## Install
  4. With [npm](https://npmjs.org/package/postcss-zindex) do:
  5. ```
  6. npm install postcss-zindex --save
  7. ```
  8. ## Example
  9. Sometimes, you may introduce z-index values into your CSS that are larger than
  10. necessary, in order to improve your understanding of how each stack relates to
  11. the others. For example, you might have a modal overlay at `5000` and the dialog
  12. for it at `5500` - so that modal classes occupy the `5xxx` space.
  13. But in production, it is unnecessary to use such large values for z-index where
  14. smaller values would suffice. This module will reduce all z-index declarations
  15. whilst respecting your original intent; such that the overlay becomes `1` and
  16. the dialog becomes `2`. For more examples, see the [tests](test.js).
  17. ### Input
  18. ```css
  19. .modal {
  20. z-index: 5000
  21. }
  22. .modal-overlay {
  23. z-index: 5500
  24. }
  25. ```
  26. ### Output
  27. ```css
  28. .modal {
  29. z-index: 1
  30. }
  31. .modal-overlay {
  32. z-index: 2
  33. }
  34. ```
  35. Note that this module does not attempt to normalize relative z-index values,
  36. such as `-1`; indeed, it will abort immediately when encountering these values
  37. as it cannot be sure that rebasing mixed positive & negative values will keep
  38. the stacking context intact. Be careful with using this module alongside
  39. JavaScript injected CSS; ideally you should have already extracted all of your
  40. stacking context into CSS.
  41. ## API
  42. ### zindex([options])
  43. #### options
  44. ##### startIndex
  45. Type: `number`
  46. Default: `1`
  47. Set this to any other positive integer if you want to override z-indices from
  48. other sources outside your control. For example if a third party widget has a
  49. maximum z-index of `99`, you can set this to `100` and not have to worry about
  50. stacking conflicts.
  51. ## Usage
  52. See the [PostCSS documentation](https://github.com/postcss/postcss#usage) for
  53. examples for your environment.
  54. ## Contributing
  55. Pull requests are welcome. If you add functionality, then please add unit tests
  56. to cover it.
  57. ## License
  58. MIT © [Ben Briggs](http://beneb.info)
  59. [ci]: https://travis-ci.org/ben-eb/postcss-zindex
  60. [deps]: https://gemnasium.com/ben-eb/postcss-zindex
  61. [npm]: http://badge.fury.io/js/postcss-zindex
  62. [postcss]: https://github.com/postcss/postcss