Position

A collection of utility classes to position content.

Table of contents

• Usage
  • X and Y directions
  • Center
  • Cover
  • Outside
• Small modifier
• Medium modifier
• Large modifier
• Utility classes

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.

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.

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.

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.

Cover

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

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.

Small modifier

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

Medium modifier

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

Large modifier

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

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.