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.

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

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

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

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

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

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

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

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

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

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

.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); }

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

Variables

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