|
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 |
- # [postcss][postcss]-zindex [][ci] [][npm] [][deps]
-
- > Reduce z-index values with PostCSS.
-
- ## Install
-
- With [npm](https://npmjs.org/package/postcss-zindex) do:
-
- ```
- npm install postcss-zindex --save
- ```
-
- ## Example
-
- Sometimes, you may introduce z-index values into your CSS that are larger than
- necessary, in order to improve your understanding of how each stack relates to
- the others. For example, you might have a modal overlay at `5000` and the dialog
- for it at `5500` - so that modal classes occupy the `5xxx` space.
-
- But in production, it is unnecessary to use such large values for z-index where
- smaller values would suffice. This module will reduce all z-index declarations
- whilst respecting your original intent; such that the overlay becomes `1` and
- the dialog becomes `2`. For more examples, see the [tests](test.js).
-
- ### Input
-
- ```css
- .modal {
- z-index: 5000
- }
-
- .modal-overlay {
- z-index: 5500
- }
- ```
-
- ### Output
-
- ```css
- .modal {
- z-index: 1
- }
-
- .modal-overlay {
- z-index: 2
- }
- ```
-
- Note that this module does not attempt to normalize relative z-index values,
- such as `-1`; indeed, it will abort immediately when encountering these values
- as it cannot be sure that rebasing mixed positive & negative values will keep
- the stacking context intact. Be careful with using this module alongside
- JavaScript injected CSS; ideally you should have already extracted all of your
- stacking context into CSS.
-
- ## API
-
- ### zindex([options])
-
- #### options
-
- ##### startIndex
-
- Type: `number`
- Default: `1`
-
- Set this to any other positive integer if you want to override z-indices from
- other sources outside your control. For example if a third party widget has a
- maximum z-index of `99`, you can set this to `100` and not have to worry about
- stacking conflicts.
-
- ## Usage
-
- See the [PostCSS documentation](https://github.com/postcss/postcss#usage) for
- examples for your environment.
-
- ## Contributing
-
- Pull requests are welcome. If you add functionality, then please add unit tests
- to cover it.
-
- ## License
-
- MIT © [Ben Briggs](http://beneb.info)
-
- [ci]: https://travis-ci.org/ben-eb/postcss-zindex
- [deps]: https://gemnasium.com/ben-eb/postcss-zindex
- [npm]: http://badge.fury.io/js/postcss-zindex
- [postcss]: https://github.com/postcss/postcss
|