Position

Basic position utility classes with module mixins for responsive modifiers.

Utilities (anchor)

Position utility names and property values
Utility name	Property values
.absolute	position: absolute
.fixed	position: fixed
.relative	position: relative
.static	position: static
.sticky	position: sticky
.position-unset	position: unset

Responsive mixins (anchor)

Responsive modifier mixins are provided to include where required in custom breakpoints, the utilities available use the following modifier class naming convention:

.sticky
.sticky-xxl
.sticky-xl
.sticky-lg
.sticky-md
.sticky-sm
.sticky-xs
.sticky-xxs

Using the module (anchor)

To use the module load the StyleMods scss directory as follows (changing the path to suit the source files location as required) then include the Sass mixin anywhere below.

custom.scss

@use "stylemods/scss" as *;
@include position-css;

// Example breakpoint
@media (max-width: 480px) {
  @include position-sm-css;
}

Source code (anchor)

position.scss

//  ------------------------------------------------------------
//  Position
//  ------------------------------------------------------------
$unset:     unset;
$relative:  relative;
$absolute:  absolute;
$fixed:     fixed;
$sticky:    sticky;

$position-value: (
  "pos-unset": $unset,
  "pos-relative": $relative,
  "pos-absolute": $absolute,
  "pos-fixed": $fixed,
  "pos-sticky": $sticky,
) !default;

@mixin position-css {
  @each $name, $value in $position-value {
    .#{$name} {
      position: #{$value};
    }
  }
}

@mixin position-xxl-css {
  @each $name, $value in $position-value {
    .#{$name}-xxl {
      position: #{$value};
    }
  }
}

@mixin position-xl-css {
  @each $name, $value in $position-value {
    .#{$name}-xl {
      position: #{$value};
    }
  }
}

@mixin position-lg-css {
  @each $name, $value in $position-value {
    .#{$name}-lg {
      position: #{$value};
    }
  }
}

@mixin position-md-css {
  @each $name, $value in $position-value {
    .#{$name}-md {
      position: #{$value};
    }
  }
}

@mixin position-sm-css {
  @each $name, $value in $position-value {
    .#{$name}-sm {
      position: #{$value};
    }
  }
}

@mixin position-xs-css {
  @each $name, $value in $position-value {
    .#{$name}-xs {
      position: #{$value};
    }
  }
}

@mixin position-xxs-css {
  @each $name, $value in $position-value {
    .#{$name}-xxs {
      position: #{$value};
    }
  }
}