MelangeCSS Reference

Current Version: 1.0.0-RC4

Position

Position provides classes for fixed, absolute, or static positioning, along with some classes for basic position top, left, right, and bottom.

Properties

Location

The properties can be used with the position values to place things explicitly. Note that in addition to the positive values like left-4 or top-2, there are negative values as well, like left--4 and top--2.

top*
Steps
top-0
.top-0 {
  top: 0;
}
top-1
.top-1 {
  top: var(--mg-sp-1);
}
top-2
.top-2 {
  top: var(--mg-sp-2);
}
top-3
.top-3 {
  top: var(--mg-sp-3);
}
top-4
.top-4 {
  top: var(--mg-sp-4);
}
top-5
.top-5 {
  top: var(--mg-sp-5);
}
top-6
.top-6 {
  top: var(--mg-sp-6);
}
top-7
.top-7 {
  top: var(--mg-sp-7);
}
top-8
.top-8 {
  top: var(--mg-sp-8);
}
top--1
.top--1 {
  top: calc(-1 * var(--mg-sp-1));
}
top--2
.top--2 {
  top: calc(-1 * var(--mg-sp-2));
}
top--3
.top--3 {
  top: calc(-1 * var(--mg-sp-3));
}
top--4
.top--4 {
  top: calc(-1 * var(--mg-sp-4));
}
top--5
.top--5 {
  top: calc(-1 * var(--mg-sp-5));
}
top--6
.top--6 {
  top: calc(-1 * var(--mg-sp-6));
}
top--7
.top--7 {
  top: calc(-1 * var(--mg-sp-7));
}
top--8
.top--8 {
  top: calc(-1 * var(--mg-sp-8));
}
left*
Steps
left-0
.left-0 {
  left: 0;
}
left-1
.left-1 {
  left: var(--mg-sp-1);
}
left-2
.left-2 {
  left: var(--mg-sp-2);
}
left-3
.left-3 {
  left: var(--mg-sp-3);
}
left-4
.left-4 {
  left: var(--mg-sp-4);
}
left-5
.left-5 {
  left: var(--mg-sp-5);
}
left-6
.left-6 {
  left: var(--mg-sp-6);
}
left-7
.left-7 {
  left: var(--mg-sp-7);
}
left-8
.left-8 {
  left: var(--mg-sp-8);
}
left--1
.left--1 {
  left: calc(-1 * var(--mg-sp-1));
}
left--2
.left--2 {
  left: calc(-1 * var(--mg-sp-2));
}
left--3
.left--3 {
  left: calc(-1 * var(--mg-sp-3));
}
left--4
.left--4 {
  left: calc(-1 * var(--mg-sp-4));
}
left--5
.left--5 {
  left: calc(-1 * var(--mg-sp-5));
}
left--6
.left--6 {
  left: calc(-1 * var(--mg-sp-6));
}
left--7
.left--7 {
  left: calc(-1 * var(--mg-sp-7));
}
left--8
.left--8 {
  left: calc(-1 * var(--mg-sp-8));
}
right*
Steps
right-0
.right-0 {
  right: 0;
}
right-1
.right-1 {
  right: var(--mg-sp-1);
}
right-2
.right-2 {
  right: var(--mg-sp-2);
}
right-3
.right-3 {
  right: var(--mg-sp-3);
}
right-4
.right-4 {
  right: var(--mg-sp-4);
}
right-5
.right-5 {
  right: var(--mg-sp-5);
}
right-6
.right-6 {
  right: var(--mg-sp-6);
}
right-7
.right-7 {
  right: var(--mg-sp-7);
}
right-8
.right-8 {
  right: var(--mg-sp-8);
}
right--1
.right--1 {
  right: calc(-1 * var(--mg-sp-1));
}
right--2
.right--2 {
  right: calc(-1 * var(--mg-sp-2));
}
right--3
.right--3 {
  right: calc(-1 * var(--mg-sp-3));
}
right--4
.right--4 {
  right: calc(-1 * var(--mg-sp-4));
}
right--5
.right--5 {
  right: calc(-1 * var(--mg-sp-5));
}
right--6
.right--6 {
  right: calc(-1 * var(--mg-sp-6));
}
right--7
.right--7 {
  right: calc(-1 * var(--mg-sp-7));
}
right--8
.right--8 {
  right: calc(-1 * var(--mg-sp-8));
}
bottom*
Steps
bottom-0
.bottom-0 {
  bottom: 0;
}
bottom-1
.bottom-1 {
  bottom: var(--mg-sp-1);
}
bottom-2
.bottom-2 {
  bottom: var(--mg-sp-2);
}
bottom-3
.bottom-3 {
  bottom: var(--mg-sp-3);
}
bottom-4
.bottom-4 {
  bottom: var(--mg-sp-4);
}
bottom-5
.bottom-5 {
  bottom: var(--mg-sp-5);
}
bottom-6
.bottom-6 {
  bottom: var(--mg-sp-6);
}
bottom-7
.bottom-7 {
  bottom: var(--mg-sp-7);
}
bottom-8
.bottom-8 {
  bottom: var(--mg-sp-8);
}
bottom--1
.bottom--1 {
  bottom: calc(-1 * var(--mg-sp-1));
}
bottom--2
.bottom--2 {
  bottom: calc(-1 * var(--mg-sp-2));
}
bottom--3
.bottom--3 {
  bottom: calc(-1 * var(--mg-sp-3));
}
bottom--4
.bottom--4 {
  bottom: calc(-1 * var(--mg-sp-4));
}
bottom--5
.bottom--5 {
  bottom: calc(-1 * var(--mg-sp-5));
}
bottom--6
.bottom--6 {
  bottom: calc(-1 * var(--mg-sp-6));
}
bottom--7
.bottom--7 {
  bottom: calc(-1 * var(--mg-sp-7));
}
bottom--8
.bottom--8 {
  bottom: calc(-1 * var(--mg-sp-8));
}
Position
pos-static
.pos-static {
  position: static;
}
pos-relative
.pos-relative {
  position: relative;
}
pos-absolute
.pos-absolute {
  position: absolute;
}
pos-fixed
.pos-fixed {
  position: fixed;
}