Position

A collection of utility classes to position content.

Usage

To apply this component, add one of the .uk-position-* classes to a block element. When using this component to place content on top of an image, add the .uk-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.

Class	Description
`.uk-position-top`	Positions the element at the top.
`.uk-position-left`	Positions the element at the left.
`.uk-position-right`	Positions the element at the right.
`.uk-position-bottom`	Positions the element at the bottom.

<div class="uk-inline">
  <!-- Place any content, like an image, here -->

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

Top

Bottom

Left

Right

<div class="uk-inline uk-margin">
  <img src="/images/photo.jpg" width="1800" height="1200" alt="" />

  <div class="uk-overlay uk-overlay-default uk-position-top uk-text-center">
    Top
  </div>
  <div class="uk-overlay uk-overlay-default uk-position-bottom uk-text-center">
    Bottom
  </div>
  <div
    class="uk-flex uk-flex-middle uk-overlay uk-overlay-default uk-position-left"
  >
    Left
  </div>
  <div
    class="uk-flex uk-flex-middle uk-overlay uk-overlay-default uk-position-right"
  >
    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
`.uk-position-top-left`	Positions the element at the top left.
`.uk-position-top-center`	Positions the element at the top center.
`.uk-position-top-right`	Positions the element at the top right.
`.uk-position-center`	Positions the element vertically centered in the middle.
`.uk-position-center-left`	Positions the element vertically centered on the left.
`.uk-position-center-right`	Positions the element vertically centered on the right.
`.uk-position-bottom-left`	Positions the element at the bottom left.
`.uk-position-bottom-center`	Positions the element at the bottom center.
`.uk-position-bottom-right`	Positions the element at the bottom right.

<div class="uk-position-top-right"></div>

Top Left

Top Center

Top Right

Center Left

Center

Center Right

Bottom Left

Bottom Center

Bottom Right

<div class="uk-inline">
  <img src="/images/photo.jpg" width="1800" height="1200" alt="" />

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

Center

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
`.uk-position-center-horizontal`	Positions the element at the center from top to bottom.
`.uk-position-center-vertical`	Positions the element at the center from left to right.

<div class="uk-position-center-horizontal"></div>

Horizontal

Vertical

<div class="uk-inline">
  <img src="/images/photo.jpg" width="1800" height="1200" alt="" />

  <div class="uk-position-center-horizontal uk-overlay uk-overlay-default">
    Horizontal
  </div>
  <div class="uk-position-center-vertical uk-overlay uk-overlay-default">
    Vertical
  </div>
</div>

Cover

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

<div class="uk-position-cover"></div>

Cover

<div class="uk-inline">
  <img src="/images/photo.jpg" width="1800" height="1200" alt="" />

  <div
    class="uk-flex uk-flex-center uk-flex-middle uk-overlay uk-overlay-default uk-position-cover"
  >
    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
`.uk-position-center-left-out`	Positions the element vertically centered outside on the left.
`.uk-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="uk-position-center-left-out"></div>

Out

Out

<div class="uk-inline">
  <img src="/images/photo.jpg" width="1800" height="1200" alt="" />

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

Small modifier

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

<div class="uk-position-center uk-position-small"></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="uk-inline uk-margin">
  <img src="/images/photo.jpg" width="1800" height="1200" alt="" />

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

<div class="uk-inline uk-margin">
  <img src="/images/photo.jpg" width="1800" height="1200" alt="" />

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

<div class="uk-inline uk-margin">
  <img src="/images/photo.jpg" width="1800" height="1200" alt="" />

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

<div class="uk-margin uk-text-center">
  <div class="uk-inline-block uk-width-large">
    <img src="/images/photo.jpg" width="1800" height="1200" alt="" />

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

Medium modifier

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

<div class="uk-position-center uk-position-medium"></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="uk-inline uk-margin">
  <img src="/images/photo.jpg" width="1800" height="1200" alt="" />

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

<div class="uk-inline uk-margin">
  <img src="/images/photo.jpg" width="1800" height="1200" alt="" />

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

<div class="uk-inline uk-margin">
  <img src="/images/photo.jpg" width="1800" height="1200" alt="" />

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

<div class="uk-margin uk-text-center">
  <div class="uk-inline-block uk-width-large">
    <img src="/images/photo.jpg" width="1800" height="1200" alt="" />

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

Large modifier

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

<div class="uk-position-large uk-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="uk-inline uk-margin">
  <img src="/images/photo.jpg" width="1800" height="1200" alt="" />

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

<div class="uk-inline uk-margin">
  <img src="/images/photo.jpg" width="1800" height="1200" alt="" />

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

<div class="uk-inline uk-margin">
  <img src="/images/photo.jpg" width="1800" height="1200" alt="" />

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

<div class="uk-margin uk-text-center">
  <div class="uk-inline-block uk-width-large">
    <img src="/images/photo.jpg" width="1800" height="1200" alt="" />

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

Utility classes

This component features a number of general position utility classes:

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

Theme development

On your tailwind.config.js file, add the Position component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        position: {
            hooks: {},
            media: true
        }
    }
}),