🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Position

Position and top/bottom/right/left utility classes:


🔍 On this page:

  1. Position
  2. Top/Bottom/Right/Left
  3. Responsive
  4. How to center

Position #

Position utility classes:

Class Description
.position-relative position: relative;
.position-absolute position: absolute;
.position-fixed position: fixed;
.position-sticky position: sticky;
.position-static position: static;

Top/Bottom/Right/Left #

Inset utility class:

Class Description
.inset-0 top: 0; right: 0; bottom: 0; left: 0;

Top utility classes:

Class Description
.top-0 top: 0;
.top-50% top: 50%;
.top-xxxxs top: var(--space-xxxxs);
.top-xxxs top: var(--space-xxxs);
.top-xxs top: var(--space-xxs);
.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-xxl top: var(--space-xxl);
.top-xxxl top: var(--space-xxxl);
.top-xxxxl top: var(--space-xxxxl);

Bottom utility classes:

Class Description
.bottom-0 bottom: 0;
.bottom-50% bottom: 50%;
.bottom-xxxxs bottom: var(--space-xxxxs);
.bottom-xxxs bottom: var(--space-xxxs);
.bottom-xxs bottom: var(--space-xxs);
.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-xxl bottom: var(--space-xxl);
.bottom-xxxl bottom: var(--space-xxxl);
.bottom-xxxxl bottom: var(--space-xxxxl);

Right utility classes:

Class Description
.right-0 right: 0;
.right-50% right: 50%;
.right-xxxxs right: var(--space-xxxxs);
.right-xxxs right: var(--space-xxxs);
.right-xxs right: var(--space-xxs);
.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-xxl right: var(--space-xxl);
.right-xxxl right: var(--space-xxxl);
.right-xxxxl right: var(--space-xxxxl);

Left utility classes:

Class Description
.left-0 left: 0;
.left-50% left: 50%;
.left-xxxxs left: var(--space-xxxxs);
.left-xxxs left: var(--space-xxxs);
.left-xxs left: var(--space-xxs);
.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-xxl left: var(--space-xxl);
.left-xxxl left: var(--space-xxxl);
.left-xxxxl left: var(--space-xxxxl);

Responsive #

Edit the position and inset at a specific breakpoint adding the @{breakpoint} suffix to the position utility classes:

<div class="[email protected] [email protected]">
  <!-- ... -->
</div>

How to Center #

How to center an absolutely positioned element using the position and transform classes:

<!-- how to center element -->
<div class="position-relative">
  <div class="position-absolute top-50% left-50% -translate-50%">
    Centered content!
  </div>
</div>

<!-- how to horizontally center element -->
<div class="position-relative">
  <div class="position-absolute left-50% -translate-x-50%">
    Centered content!
  </div>
</div>

<!-- how to vertically center element -->
<div class="position-relative">
  <div class="position-absolute top-50% -translate-y-50%">
    Centered content!
  </div>
</div>

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us