MelangeCSS Reference

Current Version: 1.0.0-RC4

Position ( Not Small Width )

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