Position Utilities

Shipyard’s position utilities are helpful to override the default styles of component.

Position Utilities .{ screen }:{ position }

Useful when you need to overwrite the default styles of an element or component.

.static { position: static }
.relative { position: relative }
.absolute { position: absolute }
.fixed { position: fixed }

@media screen and (min-width:  576px) {
  .sm:static { position: static }
  .sm:relative { position: relative }
  .sm:absolute { position: absolute }
  .sm:fixed { position: fixed }
}

@media screen and (min-width:  768px) {
  .md:static { position: static }
  .md:relative { position: relative }
  .md:absolute { position: absolute }
  .md:fixed { position: fixed }
}

@media screen and (min-width:  992px) {
  .lg:static { position: static }
  .lg:relative { position: relative }
  .lg:absolute { position: absolute }
  .lg:fixed { position: fixed }
}

@media screen and (min-width:  1200px) {
  .xl:static { position: static }
  .xl:relative { position: relative }
  .xl:absolute { position: absolute }
  .xl:fixed { position: fixed }
}