Position

Ready Added in 2.0.0

A collection of utility classes to position content.

Usage

To apply this component, add one of the .gls-position-* classes to a block element. When using this component to place content on top of an image, add the .gls-inline class from the Utility component to a container element around the image and the element to create a position context.

Note This is often used to position an overlay from the Overlay component. Use the .gls-light or .gls-dark class from the Inverse component to apply a light or dark color for better visibility.

Class Description
.gls-position-top Positions the element at the top.
.gls-position-left Positions the element at the left.
.gls-position-right Positions the element at the right.
.gls-position-bottom Positions the element at the bottom. 
<div class="gls-inline">

    <!-- Place any content, like an image, here -->

    <div class="gls-position-center"></div>

</div>
  • Top
    Bottom
    Left
    Right
  • <div class="gls-inline gls-margin">

    <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">

    <div class="gls-position-top gls-overlay gls-overlay-default gls-text-center">Top</div>
    <div class="gls-position-bottom gls-overlay gls-overlay-default gls-text-center">Bottom</div>
    <div class="gls-position-left gls-overlay gls-overlay-default gls-flex gls-flex-middle">Left</div>
    <div class="gls-position-right gls-overlay gls-overlay-default gls-flex gls-flex-middle">Right</div>

</div>

X and Y directions

You can also apply more specific positions that won’t spread over one side of the parent container by adding one of the following classes.

Class Description
.gls-position-top-left Positions the element at the top left.
.gls-position-top-center Positions the element at the top center.
.gls-position-top-right Positions the element at the top right.
.gls-position-center Positions the element vertically centered in the middle.
.gls-position-center-left Positions the element vertically centered on the left.
.gls-position-center-right Positions the element vertically centered on the right.
.gls-position-bottom-left Positions the element at the bottom left.
.gls-position-bottom-center Positions the element at the bottom center.
.gls-position-bottom-right Positions the element at the bottom right. 
<div class="gls-position-top-right"></div>
  • Top Left
    Top Center
    Top Right
    Center Left
    Center
    Center Right
    Bottom Left
    Bottom Center
    Bottom Right
  • <div class="gls-inline">

    <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">

    <div class="gls-position-top-left gls-overlay gls-overlay-default">Top Left</div>
    <div class="gls-position-top-center gls-overlay gls-overlay-default">Top Center</div>
    <div class="gls-position-top-right gls-overlay gls-overlay-default">Top Right</div>
    <div class="gls-position-center-left gls-overlay gls-overlay-default">Center Left</div>
    <div class="gls-position-center gls-overlay gls-overlay-default">Center</div>
    <div class="gls-position-center-right gls-overlay gls-overlay-default">Center Right</div>
    <div class="gls-position-bottom-left gls-overlay gls-overlay-default">Bottom Left</div>
    <div class="gls-position-bottom-center gls-overlay gls-overlay-default">Bottom Center</div>
    <div class="gls-position-bottom-right gls-overlay gls-overlay-default">Bottom Right</div>

</div>

Cover

If you want a position element to cover its container, just add the .gls-position-cover class.

<div class="gls-position-cover"></div>
  • Cover
  • <div class="gls-inline">

    <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">

    <div class="gls-position-cover gls-overlay gls-overlay-default gls-flex gls-flex-center gls-flex-middle">Cover</div>

</div>

Outside

There are two classes to center elements outside on the left and right of the parent container. This is useful to position the Slidenav component outside of a Slideshow or Slider component.

Class Description
.gls-position-center-left-out Positions the element vertically centered outside on the left.
.gls-position-center-right-out Positions the element vertically centered outside on the right.

Note Once the outside positioned element sticks out of the viewport to the right, it will cause a horizontal scrollbar. Use the Visibility component to hide the outside positioned element on a smaller viewports and show an inside positioned element instead.

<div class="gls-position-center-left-out"></div>
  • Out
    Out
  • <div class="gls-inline">

    <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">

    <div class="gls-position-center-left-out gls-overlay gls-overlay-primary gls-visible@s">Out</div>
    <div class="gls-position-center-right-out gls-overlay gls-overlay-primary gls-visible@s">Out</div>

</div>

Small modifier

To apply a small margin to positioned elements, add the .gls-position-small class.

<div class="gls-position-small gls-position-center"></div>
  • Top Left
    Top Center
    Top Right
    Center Left
    Center
    Center Right
    Bottom Left
    Bottom Center
    Bottom Right
    Top
    Bottom
    Left
    Right
    Cover
    Out
    Out
  • <div class="gls-inline gls-margin">

    <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">

    <div class="gls-position-small gls-position-top-left gls-overlay gls-overlay-default">Top Left</div>
    <div class="gls-position-small gls-position-top-center gls-overlay gls-overlay-default">Top Center</div>
    <div class="gls-position-small gls-position-top-right gls-overlay gls-overlay-default">Top Right</div>
    <div class="gls-position-small gls-position-center-left gls-overlay gls-overlay-default">Center Left</div>
    <div class="gls-position-small gls-position-center gls-overlay gls-overlay-default">Center</div>
    <div class="gls-position-small gls-position-center-right gls-overlay gls-overlay-default">Center Right</div>
    <div class="gls-position-small gls-position-bottom-left gls-overlay gls-overlay-default">Bottom Left</div>
    <div class="gls-position-small gls-position-bottom-center gls-overlay gls-overlay-default">Bottom Center</div>
    <div class="gls-position-small gls-position-bottom-right gls-overlay gls-overlay-default">Bottom Right</div>

</div>

<div class="gls-inline gls-margin">

    <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">

    <div class="gls-position-small gls-position-top gls-overlay gls-overlay-default gls-text-center">Top</div>
    <div class="gls-position-small gls-position-bottom gls-overlay gls-overlay-default gls-text-center">Bottom</div>
    <div class="gls-position-small gls-position-left gls-overlay gls-overlay-default gls-flex gls-flex-middle">Left</div>
    <div class="gls-position-small gls-position-right gls-overlay gls-overlay-default gls-flex gls-flex-middle">Right</div>

</div>

<div class="gls-inline gls-margin">

    <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">

    <div class="gls-position-small gls-position-cover gls-overlay gls-overlay-default gls-flex gls-flex-center gls-flex-middle">Cover</div>

</div>

<div class="gls-margin gls-text-center">
    <div class="gls-inline-block gls-width-large">

        <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">

        <div class="gls-position-small gls-position-center-left-out gls-overlay gls-overlay-primary gls-visible@s">Out</div>
        <div class="gls-position-small gls-position-center-right-out gls-overlay gls-overlay-primary gls-visible@s">Out</div>

    </div>
</div>

Medium modifier

To apply a medium margin to positioned elements, add the .gls-position-medium class.

<div class="gls-position-medium gls-position-center"></div>
  • Top Left
    Top Center
    Top Right
    Center Left
    Center
    Center Right
    Bottom Left
    Bottom Center
    Bottom Right
    Top
    Bottom
    Left
    Right
    Cover
    Out
    Out
  • <div class="gls-inline gls-margin">

    <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">

    <div class="gls-position-medium gls-position-top-left gls-overlay gls-overlay-default">Top Left</div>
    <div class="gls-position-medium gls-position-top-center gls-overlay gls-overlay-default">Top Center</div>
    <div class="gls-position-medium gls-position-top-right gls-overlay gls-overlay-default">Top Right</div>
    <div class="gls-position-medium gls-position-center-left gls-overlay gls-overlay-default">Center Left</div>
    <div class="gls-position-medium gls-position-center gls-overlay gls-overlay-default">Center</div>
    <div class="gls-position-medium gls-position-center-right gls-overlay gls-overlay-default">Center Right</div>
    <div class="gls-position-medium gls-position-bottom-left gls-overlay gls-overlay-default">Bottom Left</div>
    <div class="gls-position-medium gls-position-bottom-center gls-overlay gls-overlay-default">Bottom Center</div>
    <div class="gls-position-medium gls-position-bottom-right gls-overlay gls-overlay-default">Bottom Right</div>

</div>

<div class="gls-inline gls-margin">

    <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">

    <div class="gls-position-medium gls-position-top gls-overlay gls-overlay-default gls-text-center">Top</div>
    <div class="gls-position-medium gls-position-bottom gls-overlay gls-overlay-default gls-text-center">Bottom</div>
    <div class="gls-position-medium gls-position-left gls-overlay gls-overlay-default gls-flex gls-flex-middle">Left</div>
    <div class="gls-position-medium gls-position-right gls-overlay gls-overlay-default gls-flex gls-flex-middle">Right</div>

</div>

<div class="gls-inline gls-margin">

    <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">

    <div class="gls-position-medium gls-position-cover gls-overlay gls-overlay-default gls-flex gls-flex-center gls-flex-middle">Cover</div>

</div>

<div class="gls-margin gls-text-center">
    <div class="gls-inline-block gls-width-large">

        <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">

        <div class="gls-position-medium gls-position-center-left-out gls-overlay gls-overlay-primary gls-visible@s">Out</div>
        <div class="gls-position-medium gls-position-center-right-out gls-overlay gls-overlay-primary gls-visible@s">Out</div>

    </div>
</div>

Large modifier

To apply a large margin to positioned elements, add the .gls-position-large class.

<div class="gls-position-large gls-position-center"></div>
  • Top Left
    Top Center
    Top Right
    Center Left
    Center
    Center Right
    Bottom Left
    Bottom Center
    Bottom Right
    Top
    Bottom
    Left
    Right
    Cover
    Out
    Out
  • <div class="gls-inline gls-margin">

    <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">

    <div class="gls-position-large gls-position-top-left gls-overlay gls-overlay-default">Top Left</div>
    <div class="gls-position-large gls-position-top-center gls-overlay gls-overlay-default">Top Center</div>
    <div class="gls-position-large gls-position-top-right gls-overlay gls-overlay-default">Top Right</div>
    <div class="gls-position-large gls-position-center-left gls-overlay gls-overlay-default">Center Left</div>
    <div class="gls-position-large gls-position-center gls-overlay gls-overlay-default">Center</div>
    <div class="gls-position-large gls-position-center-right gls-overlay gls-overlay-default">Center Right</div>
    <div class="gls-position-large gls-position-bottom-left gls-overlay gls-overlay-default">Bottom Left</div>
    <div class="gls-position-large gls-position-bottom-center gls-overlay gls-overlay-default">Bottom Center</div>
    <div class="gls-position-large gls-position-bottom-right gls-overlay gls-overlay-default">Bottom Right</div>

</div>

<div class="gls-inline gls-margin">

    <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">

    <div class="gls-position-large gls-position-top gls-overlay gls-overlay-default gls-text-center">Top</div>
    <div class="gls-position-large gls-position-bottom gls-overlay gls-overlay-default gls-text-center">Bottom</div>
    <div class="gls-position-large gls-position-left gls-overlay gls-overlay-default gls-flex gls-flex-middle">Left</div>
    <div class="gls-position-large gls-position-right gls-overlay gls-overlay-default gls-flex gls-flex-middle">Right</div>

</div>

<div class="gls-inline gls-margin">

    <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">

    <div class="gls-position-large gls-position-cover gls-overlay gls-overlay-default gls-flex gls-flex-center gls-flex-middle">Cover</div>

</div>

<div class="gls-margin gls-text-center">
    <div class="gls-inline-block gls-width-large">

        <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">

        <div class="gls-position-large gls-position-center-left-out gls-overlay gls-overlay-primary gls-visible@s">Out</div>
        <div class="gls-position-large gls-position-center-right-out gls-overlay gls-overlay-primary gls-visible@s">Out</div>

    </div>
</div>

Utility classes

This component features a number of general position utility classes:

Class Description
.gls-position-relative Add this class to apply relative positioning.
.gls-position-absolute Add this class to apply absolute positioning.
.gls-position-fixed Add this class to apply fixed positioning.
.gls-position-z-index Add this class to apply a z-index of 1.