# postcss-position-alt > PostCSS plugin that adds shorthand to position declarations Latest version **0.7.0** (published 2019-03-24) · MIT license · 0 weekly downloads ## Install ```sh npm install postcss-position-alt pnpm add postcss-position-alt yarn add postcss-position-alt bun add postcss-position-alt ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.7.0 | | Published | 2019-03-24 | | First published | 2015-10-17 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 106.6 KB | | Known vulnerabilities | 0 (+5 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 4 | | Author | Sylvain Baronnet | | Maintainers | sylvainbaronnet | | Keywords | postcss, css, postcss-plugin | ## Links - npm: https://www.npmjs.com/package/postcss-position-alt - Repository: https://github.com/sylvainbaronnet/postcss-position-alt - Issues: https://github.com/sylvainbaronnet/postcss-position-alt/issues - npm.io page: https://npm.io/package/postcss-position-alt ## Dependencies (1) - [postcss](https://npm.io/package/postcss.md) ^7.0.14 ## Alternatives - [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads - [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads - [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads - [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads - [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads ## Recent versions - 0.7.0 (latest) — 2019-03-24 - 0.6.4 — 2017-05-28 - 0.6.3 — 2017-01-24 - 0.6.2 — 2016-11-17 - 0.6.1 — 2016-06-01 - 0.6.0 — 2016-05-20 - 0.5.1 — 2016-05-17 - 0.5.0 — 2016-05-15 - 0.4.1 — 2016-05-07 - 0.4.0 — 2016-05-06 - 0.3.0 — 2016-02-07 - 0.2.0 — 2016-01-27 - 0.1.1 — 2016-01-27 - 0.1.0 — 2015-10-17 ## README # Postcss-position-alt [![Build Status][ci-img]][ci] [![Dependency Status][daviddm-image]][daviddm-url] [![npm](https://nodei.co/npm/postcss-position-alt.svg?)](https://nodei.co/npm/postcss-position-alt/) [PostCSS] plugin that adds shorthand to position declarations. [PostCSS]: https://github.com/postcss/postcss [ci-img]: https://travis-ci.org/sylvainbaronnet/postcss-position-alt.svg [ci]: https://travis-ci.org/sylvainbaronnet/postcss-position-alt [npm-url]: https://www.npmjs.com/package/postcss-position-alt [npm-image]: https://badge.fury.io/js/postcss-position-alt.svg [daviddm-image]: https://david-dm.org/sylvainbaronnet/postcss-position-alt.svg [daviddm-url]: https://david-dm.org/sylvainbaronnet/postcss-position-alt ```css .alpha { absolute: top left; } .beta { absolute: bottom 10px right z-index 1; } .gamma { fixed: top left 10px; } .delta { fixed: bottom auto left 10%; } .epsilon { fixed: top left bottom right z-index 9999; } .zeta { relative: top var(--some-var) left initial bottom revert right calc(100% + 10px); } /* Output */ .alpha { position: absolute; top: 0; left: 0; } .beta { position: absolute; bottom: 10px; right: 0; z-index: 1; } .gamma { position: fixed; top: 0; left: 10px; } .delta { position: fixed; bottom: auto; left: 10%; } .epsilon { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 9999; } .zeta { position: relative; top: var(--some-var); left: initial; bottom: revert; right: calc(100% + 10px) } ``` It's also possible to use directly position without position type : ```css .toto { top: 10px left z-index 100; } .titi { right: left 10px z-index bottom 1px; } /* Output */ .toto { top: 10px; left: 0; z-index: 100; } .titi { right: 0; left: 10px; bottom: 1px; z-index: 0; } ``` It support those properties aliases : ```css .aliases { absolute t 1px l 2px b 3px r 4px z 5 /* or zi */ } /* Output */ .aliases { position: absolute; top: 1px; left: 2px; bottom: 3px; right: 4px; z-index: 5; } ``` `full` keyword : ```css .full { fixed: full; } .full2 { absolute: full z 99999; } .full3 { fixed: full 10px z 99999; } /* Output */ .full { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .full2 { position: absolute; z-index: 99999; top: 0; right: 0; bottom: 0; left: 0; } .full3 { position: absolute; z-index: 99999; top: 10px; right: 10px; bottom: 10px; left: 10px; } ``` `horizontal` or `x` and `vertical` or `y` keywords (since `0.7.0`) : ```css .horizontal { fixed: horizontal 10px; } .vertical { absolute: vertical z 99; } .xyz { absolute: x 10px y 20px z 99; } .xyz2 { fixed: x y z; } /* Output */ .horizontal { position: fixed; right: 10px; left: 10px; } .vertical { position: absolute; z-index: 99; top: 0; bottom: 0; } .xyz { position: absolute; z-index: 99; top: 20px; right: 10px; bottom: 20px; left: 10px; } .xyz2 { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; } ``` It works with [postcss-center](https://github.com/jedmao/postcss-center) : ```css .center { absolute: left center top center; } ``` You can use the `center` keyword : ```css .center { absolute: center z-index 99; } /* Output */ .center { position: absolute; top: center; left: center; z-index: 99; } ``` postcss-center must be applied _after_ postcss-position-alt ## Usage ```js postcss([ require('postcss-position-alt') ]) ``` See [PostCSS] docs for examples for your environment. ## Changelog [Changelog](CHANGELOG.md) ## License MIT © Sylvain Baronnet for [Studio.gd](http://studio.gd) ## Alternative *See [postcss-position](https://github.com/seaneking/postcss-position) for an alternative shorthand syntax.* --- _Source: https://npm.io/package/postcss-position-alt · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._