Utilitário
Position
Classes para a propriedade position e para os offsets top/bottom/right/left/inset.
Position
| Classe CSS | Descrição |
|---|---|
.position-relative | position: relative; |
.position-absolute | position: absolute; |
.position-fixed | position: fixed; |
.position-sticky | position: sticky; |
.position-static | position: static; |
Inset
| Classe CSS | Descrição |
|---|---|
.inset-0 | top: 0; right: 0; bottom: 0; left: 0; |
Top
| Classe CSS | Descrição |
|---|---|
.top-0 | top: 0; |
.top-50% | top: 50%; |
.top-4xs | top: var(--space-4xs); |
.top-3xs | top: var(--space-3xs); |
.top-2xs | top: var(--space-2xs); |
.top-xs | top: var(--space-xs); |
.top-sm | top: var(--space-sm); |
.top-md | top: var(--space-md); |
.top-lg | top: var(--space-lg); |
.top-xl | top: var(--space-xl); |
.top-2xl | top: var(--space-2xl); |
.top-3xl | top: var(--space-3xl); |
.top-4xl | top: var(--space-4xl); |
Bottom
| Classe CSS | Descrição |
|---|---|
.bottom-0 | bottom: 0; |
.bottom-50% | bottom: 50%; |
.bottom-4xs | bottom: var(--space-4xs); |
.bottom-3xs | bottom: var(--space-3xs); |
.bottom-2xs | bottom: var(--space-2xs); |
.bottom-xs | bottom: var(--space-xs); |
.bottom-sm | bottom: var(--space-sm); |
.bottom-md | bottom: var(--space-md); |
.bottom-lg | bottom: var(--space-lg); |
.bottom-xl | bottom: var(--space-xl); |
.bottom-2xl | bottom: var(--space-2xl); |
.bottom-3xl | bottom: var(--space-3xl); |
.bottom-4xl | bottom: var(--space-4xl); |
Right
| Classe CSS | Descrição |
|---|---|
.right-0 | right: 0; |
.right-50% | right: 50%; |
.right-4xs | right: var(--space-4xs); |
.right-3xs | right: var(--space-3xs); |
.right-2xs | right: var(--space-2xs); |
.right-xs | right: var(--space-xs); |
.right-sm | right: var(--space-sm); |
.right-md | right: var(--space-md); |
.right-lg | right: var(--space-lg); |
.right-xl | right: var(--space-xl); |
.right-2xl | right: var(--space-2xl); |
.right-3xl | right: var(--space-3xl); |
.right-4xl | right: var(--space-4xl); |
Left
| Classe CSS | Descrição |
|---|---|
.left-0 | left: 0; |
.left-50% | left: 50%; |
.left-4xs | left: var(--space-4xs); |
.left-3xs | left: var(--space-3xs); |
.left-2xs | left: var(--space-2xs); |
.left-xs | left: var(--space-xs); |
.left-sm | left: var(--space-sm); |
.left-md | left: var(--space-md); |
.left-lg | left: var(--space-lg); |
.left-xl | left: var(--space-xl); |
.left-2xl | left: var(--space-2xl); |
.left-3xl | left: var(--space-3xl); |
.left-4xl | left: var(--space-4xl); |
Responsivo
Adicione o sufixo @{breakpoint} para alterar o
position ou os offsets em um breakpoint específico:
<div class="position-sticky@md top-0@md">
<!-- ... -->
</div>Como centralizar
Padrão recorrente para centralizar um elemento posicionado absolutamente
combinando position e transform:
<!-- centralizar elemento -->
<div class="position-relative">
<div class="position-absolute top-50% left-50% -translate-50%">
Conteúdo centralizado!
</div>
</div>
<!-- centralizar horizontalmente -->
<div class="position-relative">
<div class="position-absolute left-50% -translate-x-50%">
Conteúdo centralizado!
</div>
</div>
<!-- centralizar verticalmente -->
<div class="position-relative">
<div class="position-absolute top-50% -translate-y-50%">
Conteúdo centralizado!
</div>
</div>