readmealignmentaspect ratiosbackgroundsbordersbox shadowscolorscontainerscursorcustom classesdisplayflexboxfontsgridline heightmarginsopacitypaddingpositionsprefixesscrolltext transformthemesvariableswhitespace

Positions

Custom Positions

Format: .{side}-{size}

CSS: top, right, bottom, left

Defaults:

positions: [0]

Examples:

<div class="t-0 r-0 b-0 l-0">
    <!-- ...snip... -->
</div>

Default Positions

.relative {
    position: relative !important;
}
.absolute {
    position: absolute !important;
}
.fixed {
    position: fixed !important;
}
.sticky {
    position: sticky !important;
}
.t-auto {
    top: auto !important;
}
.r-auto {
    right: auto !important;
}
.b-auto {
    bottom: auto !important;
}
.l-auto {
    left: auto !important;
}
.x-auto {
    right: auto !important;
    left: auto !important;
}
.y-auto {
    top: auto !important;
    bottom: auto !important;
}
.center {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}
.x-center {
    left: 50% !important;
    transform: translateX(-50%) !important;
}
.y-center {
    top: 50% !important;
    transform: translateY(-50%) !important;
}