@mixin position()

Description

Shortcut for positioning an element, using the common top right bottom left (TRBL) syntax, where a single value will be used for all sides, two values will set vertical/horizontal, and three values will set top/horizontal/bottom values. Use null for a value to keep it from displaying, and auto or initial to reset a given value.

Parameters & Output & Return

$position: null (list)

A shorthand-syntax of positioning values using the common TRBL pattern, e.g. absolute 0 0 3em auto or fixed 0 2%. The position value (absolute, relative, etc) defaults to absolute.

{CSS output} (code block)

top, right, bottom, left, and position properties

@error

Unknown positioning value: #{$item}

Examples

scss stretch over the full viewport
.overlay {
  @include position(fixed 0);
}
css compiled
.overlay {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}
scss top right offset (absolute positioning implied)
.overlay {
  @include position(2em 2em auto auto);
}
css compiled
.overlay {
  bottom: auto;
  left: auto;
  position: absolute;
  right: 2em;
  top: 2em;
}
scss vertical offset without horizontal output
.overlay {
  @include position(2em null);
}
css compiled
.overlay {
  bottom: 2em;
  position: absolute;
  top: 2em;
}