Position

Type: Mixin

@include position();

* You can call mixins with or without gls- namespace (e.g. @include gls-position();).

Position Sass mixin provides a one-line method to rapidly set both the position and the offset properties of a selected element.

Arguments

Name	Type	Description
`$position`	`string`	This option sets the `position` property of a selected element(s). Accepts `static`, `relative`, `fixed`, `absolute`, `sticky` CSS values. The default value is set to `absolute`.
`$offsets`	`list`	Accepts a list of values to set the offset of the edges of the box. Uses CSS shorthand method. The default value is set to `0`.

* To learn more about the CSS Shorthand Properties check out the links at the end of this page.

Call the mixin without passing any arguments to see the default values that it generates.

.element{
  @include position;
}

//CSS Output
.element {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Now let’s set the position value to fixed and leave the offset values as they are.

.element{
  @include position(fixed);
}

//CSS Output
.element {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Changin the offset values is easy. Note that the multiple offset values that you pass must be seperated by space.

.element{
  @include position(fixed, 10px 10px 10px 50px);
}

//CSS Output
.element {
  position: fixed;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 50px;
}

You can use the null value to skip positioning some particular edges of an element.

.element{
  @include position(absolute, null 16px 16px 16px);
}

//CSS Output
.element {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
}