Position

A collection of utility classes to position content.

Usage

Note If you are not using Tailwind CSS, you can skip this step. 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
        }
    }
}),

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.