Welcome to the MastorsCDN Position Utility Classes documentation. These classes provide a versatile system for positioning elements using left, top, right, and bottom properties with both rem and percentage-based values. Explore the sections below for previews, class names, and usage examples for rem-based and percentage-based positioning utilities.
| Preview | Class Name | Description | HTML Declaration | Copy |
|---|---|---|---|---|
| Rem-Based Position Styles | ||||
Apply these classes for positioning elements with rem-based values using a double dash (--) separator. |
||||
|
tp--05
|
.tp--05 |
Moves element 0.5rem (8px) from the top. |
|
|
|
lft--md-
|
.lft--md- |
Moves element -1rem (-16px) from the left. |
|
|
|
Combined
|
.tp--sm.lft--md |
Combines top 0.5rem and left 1rem positioning. |
|
|
| Percentage-Based Position Styles | ||||
Apply these classes for positioning elements with percentage-based values using a single dash (-) separator. |
||||
|
top-md
|
.top-md |
Moves element 20% from the top (20px of 100px container). |
|
|
|
rgt-full-
|
.rgt-full- |
Moves element -100% from the right (-100px of 100px container). |
|
|