# nuclear-position

> CSS position properties for Nuclearcss

Latest version **1.0.1** (published 2016-02-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install nuclear-position
pnpm add nuclear-position
yarn add nuclear-position
bun add nuclear-position
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2016-02-13 |
| First published | 2016-02-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Dan Sutherland |
| Maintainers | djmsutherland |
| Keywords | nuclear, position, atomic, css |

## Links

- npm: https://www.npmjs.com/package/nuclear-position
- Repository: https://github.com/djmsutherland/nuclearcss
- Homepage: https://github.com/djmsutherland/nuclearcss#readme
- Issues: https://github.com/djmsutherland/nuclearcss/issues
- npm.io page: https://npm.io/package/nuclear-position

## 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

- 1.0.1 (latest) — 2016-02-13
- 1.0.0 (hydrogen) — 2016-02-13

## README

# Nuclear css position properties

## Position

Specifies the type of positioning method used for an element.

- `static`   - Elements render in order, as they appear in the document flow.
- `absolute` - The element is positioned relative to its first positioned (not static) ancestor element.
- `fixed`    - The element is positioned relative to the browser window.
- `relative` - The element is positioned relative to its normal position.

**Note:** If "position:static", the top, right, bottom and left properties have no effect.
**Note:** A "positioned" element is one whose position is anything except static.
**Note:** If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

```css
.pos-s { position: static; }
.pos-a { position: absolute; }
.pos-f { position: fixed; }
.pos-r { position: relative; }
```

```html
<div class="pos-a">
  content
</div>
```

## Position adjustments

- `top`    - Sets the top edge position in px, cm, etc.
- `right`  - Sets the right edge position in px, cm, etc.
- `bottom` - Sets the bottom edge position in px, cm, etc.
- `left`   - Sets the left edge position in px, cm, etc.

**Note:** Negative values are allowed.

```css
.t { top: 0; }
.r { right: 0; }
.b { bottom: 0; }
.l { left: 0; }
```

```html
<div class="pos-a t r l">
  content
</div>
```

## Floats

Specifies whether or not a box (an element) should float.

- `none`  - The element is not floated, this is default.
- `left`  - The element floats to the left.
- `right` - The element floats the right.

**Note:** Absolutely positioned elements ignores the float property!

```css
.fl-n { float: none; }
.fl-l { float: left; }
.fl-r { float: right; }
```

```html
<div>
  <div class="fl-l">left</div>
  <div class="fl-r">right</div>
</div>
```

## Clear

Specifies which sides elements are not allowed to float.

- `none`  - Default. Allows floating elements on both sides.
- `left`  - No floating elements allowed on the left side.
- `right` - No floating elements allowed on the right side.
- `both`  - No floating elements allowed on either the left or the right side.

```css
.cl-n { clear: none; }
.cl-l { clear: left; }
.cl-r { clear: right; }
.cl-b { clear: both; }
```

```html
<div class="cl-b">
  <div class="fl-l">left</div>
  <div class="fl-r">right</div>
</div>
```

## Clearfix

Fixes broken layouts when children are only floating elements.

```css
.clfx:after {
  content: ' ';
  display: table;
  clear: both;
}
```

```html
<div class="clfx">
  <div class="fl-l">left</div>
  <div class="fl-r">right</div>
</div>
```

## Z index

Specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

- `auto`   - Sets the stack order equal to its parents. This is default.
- `number` - Sets the stack order of the element. Negative numbers are allowed.

**Note:** `z-index` only works on positioned elements *not* `position: static`.


```css
.z-1 { z-index: var(--z-index-1); }
.z-2 { z-index: var(--z-index-2); }
.z-3 { z-index: var(--z-index-3); }
.z-4 { z-index: var(--z-index-4); }
.z-5 { z-index: var(--z-index-5); }
```

```html
<div>
  <div class="z-1">front</div>
  <div class="z-2">back</div>
</div>
```

## Variables

```css
:root {
  --z-index-1: 3;
  --z-index-2: 2;
  --z-index-3: 1;
  --z-index-4: 0;
  --z-index-5: -1;
}
```

---
_Source: https://npm.io/package/nuclear-position · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._