Position

Positioning

CSS Reference
.absolute

The element will not remain in the natural flow of the page. It will position itself according to the closest positioned ancestor.

.absolute-center

absolute-center is a helper, that adds the offset translations to actually center the item in a container with a fixed height. It needs .absolute to function correctly.

.fixed

The element will not remain in the natural flow of the page. It will position itself according to the viewport. It also makes the element positioned.

.relative

The element will remain in the natural flow of the page. It also makes the element positioned.

.static

The element will remain in the natural flow of the page. It will not be positioned.

Coordinates:

Coordinates are helpers to position your elements both positively and negatively.

.top-* .bottom-* .left-* .right-*

These add a position coordinate with a modifier number equaling the REM value. Accepts:

0, 1, 2, -1, -2 
/*

   POSITIONING

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/

.static { position: static; }
.relative  { position: relative; }
.absolute  { position: absolute; }
.fixed  { position: fixed; }
.absolute-center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@media (--breakpoint-not-small) {
  .static-ns { position: static; }
  .relative-ns  { position: relative; }
  .absolute-ns  { position: absolute; }
  .fixed-ns  { position: fixed; }
  .absolute-center-ns {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

@media (--breakpoint-medium) {
  .static-m { position: static; }
  .relative-m  { position: relative; }
  .absolute-m  { position: absolute; }
  .fixed-m  { position: fixed; }
  .absolute-center-m {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

@media (--breakpoint-large) {
  .static-l { position: static; }
  .relative-l  { position: relative; }
  .absolute-l  { position: absolute; }
  .fixed-l  { position: fixed; }
  .absolute-center-l {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

/*

   COORDINATES

   Use in combination with the position module.

   Base:
     top
     bottom
     right
     left

   Modifiers:
     -0  = literal value 0
     -1  = literal value 1
     -2  = literal value 2
     --1 = literal value -1
     --2 = literal value -2

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/

.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.top-1 {
  top: 1rem;
}

.right-1 {
  right: 1rem;
}

.bottom-1 {
  bottom: 1rem;
}

.left-1 {
  left: 1rem;
}

.top-2 {
  top: 2rem;
}

.right-2 {
  right: 2rem;
}

.bottom-2 {
  bottom: 2rem;
}

.left-2 {
  left: 2rem;
}

.top--1 {
  top: -1rem;
}

.right--1 {
  right: -1rem;
}

.bottom--1 {
  bottom: -1rem;
}

.left--1 {
  left: -1rem;
}

.top--2 {
  top: -2rem;
}

.right--2 {
  right: -2rem;
}

.bottom--2 {
  bottom: -2rem;
}

.left--2 {
  left: -2rem;
}