Skip to content
WovenUI

Position mixins

Controls element positioning and placement within the document flow.

<!-- Basic positioning -->
<div class="relative">
  <div class="absolute top-0 right-0">
    Positioned in top-right corner
  </div>
</div>
<!-- Sticky header -->
<header class="sticky top-0">
  This header sticks to the top when scrolling
</header>
<!-- Responsive positioning -->
<div class="relative@md">
  <div class="absolute@md top-2 left-2">
    Only positioned on medium screens and up
  </div>
</div>

Position types:

  • static: Default position, follows document flow
  • relative: Positioned relative to normal position
  • absolute: Positioned relative to nearest positioned ancestor
  • fixed: Positioned relative to viewport
  • sticky: Positioned based on scroll position

Inset:

  • inset-{key}, inset-x-{key}, inset-y-{key}: Sets inset, left and right, or top and bottom from the spacing scale
  • inset-auto, inset-x-auto, inset-y-auto: Resets the matching sides to auto

Placement:

  • top-{value}: Sets top position
  • right-{value}: Sets right position
  • bottom-{value}: Sets bottom position
  • left-{value}: Sets left position
  • start-{value}, end-{value}: Sets inset-inline-start and inset-inline-end (follow text direction)

Common values: spacing keys 0, 1, 2, 3, 4, 5, 6, 8, etc. (var(--wu-space-*)) and fractions 25p, 33p, 50p, 66p, 75p, 100p (percentages)

Responsive: all position classes support responsive variants using the @breakpoint suffix:

  • relative@md: Relative positioning on medium screens and up
  • top-0@lg: Zero top position on large screens

See also z-index and transform.

Generated from the doc blocks in the core source when the site is built, so it always matches the current release of @wovenui/core. Every example is compiled against core during the build; open Compiled CSSunder an example to see its output. Guide: Position. The A to Z index lists every public mixin and function.

Source: utilities/_position.scss

Mixins

static relative absolute fixed sticky top right bottom left inset-start inset-end inset inset-x inset-y inset-auto inset-x-auto inset-y-auto absolute-center

static mixin

Sets position to static, the default document flow.

@mixin static

Example

.element {
  @include static;
}
Compiled CSS
.element {
  position: static;
}

position on MDN

Source: utilities/_position.scss:123

relative mixin

Sets position to relative, creating a positioning context for absolute children.

@mixin relative

Example

.container {
  @include relative;
}
Compiled CSS
.container {
  position: relative;
}

position on MDN

Source: utilities/_position.scss:133

absolute mixin

Sets position to absolute, removing the element from the normal document flow.

@mixin absolute

Example

.popup {
  @include absolute;
  @include top(0);
  @include left(0);
}
Compiled CSS
.popup {
  position: absolute;
  top: var(--wu-space-0);
  left: var(--wu-space-0);
}

position on MDN

Source: utilities/_position.scss:145

fixed mixin

Sets position to fixed, placing the element relative to the viewport.

@mixin fixed

Example

.banner {
  @include fixed;
  @include top(0);
  @include inset-x(0);
}
Compiled CSS
.banner {
  position: fixed;
  top: var(--wu-space-0);
  left: var(--wu-space-0);
  right: var(--wu-space-0);
}

position on MDN

Source: utilities/_position.scss:157

sticky mixin

Sets position to sticky with top 0 and z-index 999, so the element stays in view while scrolling.

@mixin sticky
Output
position: sticky; z-index: 999; top: 0

Example

.nav {
  @include sticky;
}
Compiled CSS
.nav {
  position: sticky;
  z-index: 999;
  top: 0;
}

Source: utilities/_position.scss:167

top mixin

Sets the physical top offset from the spacing scale or a raw value.

@mixin top($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredSpacing key (4), negative key (-4), fraction key (25p, -25p; 33p gives 33.333%), auto, or a raw length, percentage, calc() or var()

Example

.toast {
  @include absolute;
  @include top(4); // top: var(--wu-space-4)
}
Compiled CSS
.toast {
  position: absolute;
  top: var(--wu-space-4);
}

top on MDN

Source: utilities/_position.scss:181

right mixin

Sets the physical right offset from the spacing scale or a raw value.

@mixin right($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredSpacing key (4), negative key (-4), fraction key (25p, -25p; 33p gives 33.333%), auto, or a raw length, percentage, calc() or var()

Example

.badge {
  @include absolute;
  @include right(-2); // right: calc(-1 * var(--wu-space-2))
}
Compiled CSS
.badge {
  position: absolute;
  right: calc(-1 * var(--wu-space-2));
}

right on MDN

Source: utilities/_position.scss:193

bottom mixin

Sets the physical bottom offset from the spacing scale or a raw value.

@mixin bottom($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredSpacing key (4), negative key (-4), fraction key (25p, -25p; 33p gives 33.333%), auto, or a raw length, percentage, calc() or var()

Example

.footer {
  @include fixed;
  @include bottom(0);
}
Compiled CSS
.footer {
  position: fixed;
  bottom: var(--wu-space-0);
}

bottom on MDN

Source: utilities/_position.scss:205

left mixin

Sets the physical left offset from the spacing scale or a raw value.

@mixin left($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredSpacing key (4), negative key (-4), fraction key (25p, -25p; 33p gives 33.333%), auto, or a raw length, percentage, calc() or var()

Example

.sidebar {
  @include fixed;
  @include left(50%);
}
Compiled CSS
.sidebar {
  position: fixed;
  left: 50%;
}

left on MDN

Source: utilities/_position.scss:217

inset-start mixin

Sets inset-inline-start, which is the left offset in LTR and the right offset in RTL.

@mixin inset-start($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredSpacing key (4), negative key (-4), fraction key (25p, -25p; 33p gives 33.333%), auto, or a raw length, percentage, calc() or var()

Example

.close-button {
  @include absolute;
  @include inset-start(2); // inset-inline-start: var(--wu-space-2)
}
Compiled CSS
.close-button {
  position: absolute;
  inset-inline-start: var(--wu-space-2);
}

inset-inline-start on MDN

See also: inset-end, left. Source: utilities/_position.scss:231

inset-end mixin

Sets inset-inline-end, which is the right offset in LTR and the left offset in RTL.

@mixin inset-end($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredSpacing key (4), negative key (-4), fraction key (25p, -25p; 33p gives 33.333%), auto, or a raw length, percentage, calc() or var()

Example

.close-button {
  @include absolute;
  @include top(2);
  @include inset-end(2); // inset-inline-end: var(--wu-space-2)
}
Compiled CSS
.close-button {
  position: absolute;
  top: var(--wu-space-2);
  inset-inline-end: var(--wu-space-2);
}

inset-inline-end on MDN

See also: inset-start, right. Source: utilities/_position.scss:246

inset mixin

Sets the inset shorthand (top, right, bottom and left) to one value.

@mixin inset($val)
ParameterTypeDefaultDescription
$valNumber|Length|StringRequiredSpacing key (4), negative key (-4), fraction key (25p, -25p; 33p gives 33.333%), auto, or a raw length, percentage, calc() or var()

Example

.overlay {
  @include absolute;
  @include inset(0); // inset: var(--wu-space-0)
}
Compiled CSS
.overlay {
  position: absolute;
  inset: var(--wu-space-0);
}

inset on MDN

Source: utilities/_position.scss:262

inset-x mixin

Sets the physical left and right offsets to one value.

@mixin inset-x($val)
ParameterTypeDefaultDescription
$valNumber|Length|StringRequiredSpacing key (4), negative key (-4), fraction key (25p, -25p; 33p gives 33.333%), auto, or a raw length, percentage, calc() or var()

Example

.drawer-footer {
  @include absolute;
  @include bottom(0);
  @include inset-x(4);
}
Compiled CSS
.drawer-footer {
  position: absolute;
  bottom: var(--wu-space-0);
  left: var(--wu-space-4);
  right: var(--wu-space-4);
}

Source: utilities/_position.scss:274

inset-y mixin

Sets the top and bottom offsets to one value.

@mixin inset-y($val)
ParameterTypeDefaultDescription
$valNumber|Length|StringRequiredSpacing key (4), negative key (-4), fraction key (25p, -25p; 33p gives 33.333%), auto, or a raw length, percentage, calc() or var()

Example

.side-rail {
  @include absolute;
  @include inset-y(0);
  @include left(0);
}
Compiled CSS
.side-rail {
  position: absolute;
  top: var(--wu-space-0);
  bottom: var(--wu-space-0);
  left: var(--wu-space-0);
}

Source: utilities/_position.scss:289

inset-auto mixin

Sets the inset shorthand to auto on all four sides.

@mixin inset-auto

Example

.popover {
  @include inset-auto;
}
Compiled CSS
.popover {
  inset: auto;
}

inset on MDN

Source: utilities/_position.scss:302

inset-x-auto mixin

Sets the physical left and right offsets to auto.

@mixin inset-x-auto

Example

.tooltip {
  @include inset-x-auto;
}
Compiled CSS
.tooltip {
  left: auto;
  right: auto;
}

Source: utilities/_position.scss:311

inset-y-auto mixin

Sets the top and bottom offsets to auto.

@mixin inset-y-auto

Example

.tooltip {
  @include inset-y-auto;
}
Compiled CSS
.tooltip {
  top: auto;
  bottom: auto;
}

Source: utilities/_position.scss:321

absolute-center mixin

Centers an element absolutely within its positioned parent using top and left 50% and a -50% translate.

@mixin absolute-center

Example

.modal {
  @include absolute-center;
}
Compiled CSS
.modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(var(--wu-translate-x)) translateY(var(--wu-translate-y)) translateZ(var(--wu-translate-z)) rotate(var(--wu-rotate)) skewX(var(--wu-skew-x)) skewY(var(--wu-skew-y)) scaleX(var(--wu-scale-x)) scaleY(var(--wu-scale-y));
  --wu-translate-x: -50%;
  --wu-translate-y: -50%;
}

Source: utilities/_position.scss:331