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.

ClassDescription
.uk-position-topPositions the element at the top.
.uk-position-leftPositions the element at the left.
.uk-position-rightPositions the element at the right.
.uk-position-bottomPositions 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
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div class="uk-margin uk-inline">
    <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
    <div class="uk-position-top bg-white/80 p-4 text-center">Top</div>
    <div class="uk-position-bottom bg-white/80 p-4 text-center">Bottom</div>
    <div class="uk-position-left flex items-center bg-white/80 p-4">Left</div>
    <div class="uk-position-right flex items-center bg-white/80 p-4">Right</div>
    </div>
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div className="uk-margin uk-inline">
    <img src="/images/photo.jpg" width={1800} height={1200} alt />
    <div className="uk-position-top bg-white/80 p-4 text-center">Top</div>
    <div className="uk-position-bottom bg-white/80 p-4 text-center">Bottom</div>
    <div className="uk-position-left flex items-center bg-white/80 p-4">Left</div>
    <div className="uk-position-right flex items-center bg-white/80 p-4">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.

ClassDescription
.uk-position-top-leftPositions the element at the top left.
.uk-position-top-centerPositions the element at the top center.
.uk-position-top-rightPositions the element at the top right.
.uk-position-centerPositions the element vertically centered in the middle.
.uk-position-center-leftPositions the element vertically centered on the left.
.uk-position-center-rightPositions the element vertically centered on the right.
.uk-position-bottom-leftPositions the element at the bottom left.
.uk-position-bottom-centerPositions the element at the bottom center.
.uk-position-bottom-rightPositions 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
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div class="uk-inline">
    <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
    <div class="uk-position-top-left bg-white/80 p-4">Top Left</div>
    <div class="uk-position-top-center bg-white/80 p-4">Top Center</div>
    <div class="uk-position-top-right bg-white/80 p-4">Top Right</div>
    <div class="uk-position-center-left bg-white/80 p-4">Center Left</div>
    <div class="uk-position-center bg-white/80 p-4">Center</div>
    <div class="uk-position-center-right bg-white/80 p-4">Center Right</div>
    <div class="uk-position-bottom-left bg-white/80 p-4">Bottom Left</div>
    <div class="uk-position-bottom-center bg-white/80 p-4">Bottom Center</div>
    <div class="uk-position-bottom-right bg-white/80 p-4">Bottom Right</div>
    </div>
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div className="uk-inline">
    <img src="/images/photo.jpg" width={1800} height={1200} alt />
    <div className="uk-position-top-left bg-white/80 p-4">Top Left</div>
    <div className="uk-position-top-center bg-white/80 p-4">Top Center</div>
    <div className="uk-position-top-right bg-white/80 p-4">Top Right</div>
    <div className="uk-position-center-left bg-white/80 p-4">Center Left</div>
    <div className="uk-position-center bg-white/80 p-4">Center</div>
    <div className="uk-position-center-right bg-white/80 p-4">Center Right</div>
    <div className="uk-position-bottom-left bg-white/80 p-4">Bottom Left</div>
    <div className="uk-position-bottom-center bg-white/80 p-4">Bottom Center</div>
    <div className="uk-position-bottom-right bg-white/80 p-4">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.

ClassDescription
.uk-position-center-horizontalPositions the element at the center from top to bottom.
.uk-position-center-verticalPositions the element at the center from left to right.
<div class="uk-position-center-horizontal"></div>
  • Horizontal
    Vertical
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div class="uk-inline">
    <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
    <div class="uk-position-center-horizontal bg-white/80 p-4">Horizontal</div>
    <div class="uk-position-center-vertical bg-white/80 p-4">Vertical</div>
    </div>
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div className="uk-inline">
    <img src="/images/photo.jpg" width={1800} height={1200} alt />
    <div className="uk-position-center-horizontal bg-white/80 p-4">Horizontal</div>
    <div className="uk-position-center-vertical bg-white/80 p-4">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
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div class="uk-inline">
    <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
    <div
    class="uk-position-cover flex items-center justify-center bg-white/80 p-4"
    >
    Cover
    </div>
    </div>
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div className="uk-inline">
    <img src="/images/photo.jpg" width={1800} height={1200} alt />
    <div className="uk-position-cover flex items-center justify-center bg-white/80 p-4">
    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.

ClassDescription
.uk-position-center-left-outPositions the element vertically centered outside on the left.
.uk-position-center-right-outPositions 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
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div class="mx-auto w-3/4">
    <div class="uk-inline">
    <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
    <div class="uk-position-center-left-out bg-black/80 p-4 text-white">
    Out
    </div>
    <div class="uk-position-center-right-out bg-black/80 p-4 text-white">
    Out
    </div>
    </div>
    </div>
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div className="mx-auto w-3/4">
    <div className="uk-inline">
    <img src="/images/photo.jpg" width={1800} height={1200} alt />
    <div className="uk-position-center-left-out bg-black/80 p-4 text-white">
    Out
    </div>
    <div className="uk-position-center-right-out bg-black/80 p-4 text-white">
    Out
    </div>
    </div>
    </div>

Small modifier

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

<div class="uk-position-center uk-position-sm"></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
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div class="uk-inline">
    <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
    <div class="uk-position-top-left uk-position-sm bg-white/80 p-4">
    Top Left
    </div>
    <div class="uk-position-top-center uk-position-sm bg-white/80 p-4">
    Top Center
    </div>
    <div class="uk-position-top-right uk-position-sm bg-white/80 p-4">
    Top Right
    </div>
    <div class="uk-position-center-left uk-position-sm bg-white/80 p-4">
    Center Left
    </div>
    <div class="uk-position-center uk-position-sm bg-white/80 p-4">Center</div>
    <div class="uk-position-center-right uk-position-sm bg-white/80 p-4">
    Center Right
    </div>
    <div class="uk-position-bottom-left uk-position-sm bg-white/80 p-4">
    Bottom Left
    </div>
    <div class="uk-position-bottom-center uk-position-sm bg-white/80 p-4">
    Bottom Center
    </div>
    <div class="uk-position-bottom-right uk-position-sm bg-white/80 p-4">
    Bottom Right
    </div>
    </div>
    <div class="uk-inline mt-4">
    <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
    <div class="uk-position-toptext-center uk-position-sm bg-white/80 p-4">
    Top
    </div>
    <div class="uk-position-bottomtext-center uk-position-sm bg-white/80 p-4">
    Bottom
    </div>
    <div
    class="uk-position-left uk-position-sm flex items-center bg-white/80 p-4"
    >
    Left
    </div>
    <div
    class="uk-position-right uk-position-sm flex items-center bg-white/80 p-4"
    >
    Right
    </div>
    </div>
    <div class="uk-inline mt-4">
    <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
    <div
    class="uk-position-cover uk-position-sm flex items-center justify-center bg-white/80 p-4"
    >
    Cover
    </div>
    </div>
    <div class="mx-auto mt-4 w-3/4">
    <div class="uk-inline">
    <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
    <div
    class="uk-position-center-left-out uk-position-sm bg-black/80 p-4 text-white"
    >
    Out
    </div>
    <div
    class="uk-position-center-right-out uk-position-sm bg-black/80 p-4 text-white"
    >
    Out
    </div>
    </div>
    </div>
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div>
    <div className="uk-inline">
    <img src="/images/photo.jpg" width={1800} height={1200} alt />
    <div className="uk-position-top-left uk-position-sm bg-white/80 p-4">
    Top Left
    </div>
    <div className="uk-position-top-center uk-position-sm bg-white/80 p-4">
    Top Center
    </div>
    <div className="uk-position-top-right uk-position-sm bg-white/80 p-4">
    Top Right
    </div>
    <div className="uk-position-center-left uk-position-sm bg-white/80 p-4">
    Center Left
    </div>
    <div className="uk-position-center uk-position-sm bg-white/80 p-4">Center</div>
    <div className="uk-position-center-right uk-position-sm bg-white/80 p-4">
    Center Right
    </div>
    <div className="uk-position-bottom-left uk-position-sm bg-white/80 p-4">
    Bottom Left
    </div>
    <div className="uk-position-bottom-center uk-position-sm bg-white/80 p-4">
    Bottom Center
    </div>
    <div className="uk-position-bottom-right uk-position-sm bg-white/80 p-4">
    Bottom Right
    </div>
    </div>
    <div className="uk-inline mt-4">
    <img src="/images/photo.jpg" width={1800} height={1200} alt />
    <div className="uk-position-toptext-center uk-position-sm bg-white/80 p-4">
    Top
    </div>
    <div className="uk-position-bottomtext-center uk-position-sm bg-white/80 p-4">
    Bottom
    </div>
    <div className="uk-position-left uk-position-sm flex items-center bg-white/80 p-4">
    Left
    </div>
    <div className="uk-position-right uk-position-sm flex items-center bg-white/80 p-4">
    Right
    </div>
    </div>
    <div className="uk-inline mt-4">
    <img src="/images/photo.jpg" width={1800} height={1200} alt />
    <div className="uk-position-cover uk-position-sm flex items-center justify-center bg-white/80 p-4">
    Cover
    </div>
    </div>
    <div className="mx-auto mt-4 w-3/4">
    <div className="uk-inline">
    <img src="/images/photo.jpg" width={1800} height={1200} alt />
    <div className="uk-position-center-left-out uk-position-sm bg-black/80 p-4 text-white">
    Out
    </div>
    <div className="uk-position-center-right-out uk-position-sm bg-black/80 p-4 text-white">
    Out
    </div>
    </div>
    </div>
    </div>

Medium modifier

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

<div class="uk-position-center uk-position-md"></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
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div class="uk-inline">
    <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
    <div class="uk-position-top-left uk-position-md bg-white/80 p-4">
    Top Left
    </div>
    <div class="uk-position-top-center uk-position-md bg-white/80 p-4">
    Top Center
    </div>
    <div class="uk-position-top-right uk-position-md bg-white/80 p-4">
    Top Right
    </div>
    <div class="uk-position-center-left uk-position-md bg-white/80 p-4">
    Center Left
    </div>
    <div class="uk-position-center uk-position-md bg-white/80 p-4">Center</div>
    <div class="uk-position-center-right uk-position-md bg-white/80 p-4">
    Center Right
    </div>
    <div class="uk-position-bottom-left uk-position-md bg-white/80 p-4">
    Bottom Left
    </div>
    <div class="uk-position-bottom-center uk-position-md bg-white/80 p-4">
    Bottom Center
    </div>
    <div class="uk-position-bottom-right uk-position-md bg-white/80 p-4">
    Bottom Right
    </div>
    </div>
    <div class="uk-inline mt-4">
    <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
    <div class="uk-position-toptext-center uk-position-md bg-white/80 p-4">
    Top
    </div>
    <div class="uk-position-bottomtext-center uk-position-md bg-white/80 p-4">
    Bottom
    </div>
    <div
    class="uk-position-left uk-position-md flex items-center bg-white/80 p-4"
    >
    Left
    </div>
    <div
    class="uk-position-right uk-position-md flex items-center bg-white/80 p-4"
    >
    Right
    </div>
    </div>
    <div class="uk-inline mt-4">
    <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
    <div
    class="uk-position-cover uk-position-md flex items-center justify-center bg-white/80 p-4"
    >
    Cover
    </div>
    </div>
    <div class="mx-auto mt-4 w-3/4">
    <div class="uk-inline">
    <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
    <div
    class="uk-position-center-left-out uk-position-md bg-black/80 p-4 text-white"
    >
    Out
    </div>
    <div
    class="uk-position-center-right-out uk-position-md bg-black/80 p-4 text-white"
    >
    Out
    </div>
    </div>
    </div>
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div>
    <div className="uk-inline">
    <img src="/images/photo.jpg" width={1800} height={1200} alt />
    <div className="uk-position-top-left uk-position-md bg-white/80 p-4">
    Top Left
    </div>
    <div className="uk-position-top-center uk-position-md bg-white/80 p-4">
    Top Center
    </div>
    <div className="uk-position-top-right uk-position-md bg-white/80 p-4">
    Top Right
    </div>
    <div className="uk-position-center-left uk-position-md bg-white/80 p-4">
    Center Left
    </div>
    <div className="uk-position-center uk-position-md bg-white/80 p-4">Center</div>
    <div className="uk-position-center-right uk-position-md bg-white/80 p-4">
    Center Right
    </div>
    <div className="uk-position-bottom-left uk-position-md bg-white/80 p-4">
    Bottom Left
    </div>
    <div className="uk-position-bottom-center uk-position-md bg-white/80 p-4">
    Bottom Center
    </div>
    <div className="uk-position-bottom-right uk-position-md bg-white/80 p-4">
    Bottom Right
    </div>
    </div>
    <div className="uk-inline mt-4">
    <img src="/images/photo.jpg" width={1800} height={1200} alt />
    <div className="uk-position-toptext-center uk-position-md bg-white/80 p-4">
    Top
    </div>
    <div className="uk-position-bottomtext-center uk-position-md bg-white/80 p-4">
    Bottom
    </div>
    <div className="uk-position-left uk-position-md flex items-center bg-white/80 p-4">
    Left
    </div>
    <div className="uk-position-right uk-position-md flex items-center bg-white/80 p-4">
    Right
    </div>
    </div>
    <div className="uk-inline mt-4">
    <img src="/images/photo.jpg" width={1800} height={1200} alt />
    <div className="uk-position-cover uk-position-md flex items-center justify-center bg-white/80 p-4">
    Cover
    </div>
    </div>
    <div className="mx-auto mt-4 w-3/4">
    <div className="uk-inline">
    <img src="/images/photo.jpg" width={1800} height={1200} alt />
    <div className="uk-position-center-left-out uk-position-md bg-black/80 p-4 text-white">
    Out
    </div>
    <div className="uk-position-center-right-out uk-position-md bg-black/80 p-4 text-white">
    Out
    </div>
    </div>
    </div>
    </div>

Large modifier

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

<div class="uk-position-lg 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
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div class="uk-inline">
    <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
    <div class="uk-position-top-left uk-position-lg bg-white/80 p-4">
    Top Left
    </div>
    <div class="uk-position-top-center uk-position-lg bg-white/80 p-4">
    Top Center
    </div>
    <div class="uk-position-top-right uk-position-lg bg-white/80 p-4">
    Top Right
    </div>
    <div class="uk-position-center-left uk-position-lg bg-white/80 p-4">
    Center Left
    </div>
    <div class="uk-position-center uk-position-lg bg-white/80 p-4">Center</div>
    <div class="uk-position-center-right uk-position-lg bg-white/80 p-4">
    Center Right
    </div>
    <div class="uk-position-bottom-left uk-position-lg bg-white/80 p-4">
    Bottom Left
    </div>
    <div class="uk-position-bottom-center uk-position-lg bg-white/80 p-4">
    Bottom Center
    </div>
    <div class="uk-position-bottom-right uk-position-lg bg-white/80 p-4">
    Bottom Right
    </div>
    </div>
    <div class="uk-inline mt-4">
    <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
    <div class="uk-position-toptext-center uk-position-lg bg-white/80 p-4">
    Top
    </div>
    <div class="uk-position-bottomtext-center uk-position-lg bg-white/80 p-4">
    Bottom
    </div>
    <div
    class="uk-position-left uk-position-lg flex items-center bg-white/80 p-4"
    >
    Left
    </div>
    <div
    class="uk-position-right uk-position-lg flex items-center bg-white/80 p-4"
    >
    Right
    </div>
    </div>
    <div class="uk-inline mt-4">
    <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
    <div
    class="uk-position-cover uk-position-lg flex items-center justify-center bg-white/80 p-4"
    >
    Cover
    </div>
    </div>
    <div class="mx-auto mt-4 w-1/2">
    <div class="uk-inline">
    <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
    <div
    class="uk-position-center-left-out uk-position-lg bg-black/80 p-4 text-white"
    >
    Out
    </div>
    <div
    class="uk-position-center-right-out uk-position-lg bg-black/80 p-4 text-white"
    >
    Out
    </div>
    </div>
    </div>
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div>
    <div className="uk-inline">
    <img src="/images/photo.jpg" width={1800} height={1200} alt />
    <div className="uk-position-top-left uk-position-lg bg-white/80 p-4">
    Top Left
    </div>
    <div className="uk-position-top-center uk-position-lg bg-white/80 p-4">
    Top Center
    </div>
    <div className="uk-position-top-right uk-position-lg bg-white/80 p-4">
    Top Right
    </div>
    <div className="uk-position-center-left uk-position-lg bg-white/80 p-4">
    Center Left
    </div>
    <div className="uk-position-center uk-position-lg bg-white/80 p-4">Center</div>
    <div className="uk-position-center-right uk-position-lg bg-white/80 p-4">
    Center Right
    </div>
    <div className="uk-position-bottom-left uk-position-lg bg-white/80 p-4">
    Bottom Left
    </div>
    <div className="uk-position-bottom-center uk-position-lg bg-white/80 p-4">
    Bottom Center
    </div>
    <div className="uk-position-bottom-right uk-position-lg bg-white/80 p-4">
    Bottom Right
    </div>
    </div>
    <div className="uk-inline mt-4">
    <img src="/images/photo.jpg" width={1800} height={1200} alt />
    <div className="uk-position-toptext-center uk-position-lg bg-white/80 p-4">
    Top
    </div>
    <div className="uk-position-bottomtext-center uk-position-lg bg-white/80 p-4">
    Bottom
    </div>
    <div className="uk-position-left uk-position-lg flex items-center bg-white/80 p-4">
    Left
    </div>
    <div className="uk-position-right uk-position-lg flex items-center bg-white/80 p-4">
    Right
    </div>
    </div>
    <div className="uk-inline mt-4">
    <img src="/images/photo.jpg" width={1800} height={1200} alt />
    <div className="uk-position-cover uk-position-lg flex items-center justify-center bg-white/80 p-4">
    Cover
    </div>
    </div>
    <div className="mx-auto mt-4 w-1/2">
    <div className="uk-inline">
    <img src="/images/photo.jpg" width={1800} height={1200} alt />
    <div className="uk-position-center-left-out uk-position-lg bg-black/80 p-4 text-white">
    Out
    </div>
    <div className="uk-position-center-right-out uk-position-lg bg-black/80 p-4 text-white">
    Out
    </div>
    </div>
    </div>
    </div>

Utility classes

This component features a number of general position utility classes:

ClassDescription
.uk-position-relativeAdd this class to apply relative positioning.
.uk-position-absoluteAdd this class to apply absolute positioning.
.uk-position-fixedAdd this class to apply fixed positioning.
.uk-position-z-indexAdd this class to apply a z-index of 1.
Customize

Customize your Franken UI experience.