Компонент Позиция : Position

Коллекция вспомогательных классов для позиционирования контента.

Руководство по использованию

Чтобы применить компонент Позиция, добавьте один из классов .uk-position-* к элементу блока.

При использовании компонента Позиция для размещения контента поверх изображения добавьте класс .uk-inline из компонента Утилита к элементу контейнера вокруг изображения и к элементу с заданной позицией содержащей необходимый контент.

Примечание Довольно часто, для позиционирования наложения, используется компонент Оверлей. Используйте класс .uk-light или .uk-dark из компонента Инверсия, чтобы применить светлый или темный цвет для лучшей видимости.
Класс Описание
.uk-position-top Расположение элемента сверху.
.uk-position-left Элемент с абсолютным позиционированием перемещается влево.
.uk-position-right Элемент с абсолютным позиционированием перемещается вправо.
.uk-position-bottom Элемент с абсолютным позиционированием распологается внизу.
  * Свойству position задано значение absolute.
<div class="uk-inline">

    <!-- Разместите любой контент, например изображение, здесь -->

    <div class="uk-position-center"></div>
</div>
  • Top
    Bottom
    Left
    Right
  • <div class="uk-inline uk-margin">
        <img src="/demo/img/photo.jpg" alt="">
        <div class="uk-position-top uk-overlay uk-overlay-default uk-text-center">Top</div>
        <div class="uk-position-bottom uk-overlay uk-overlay-default uk-text-center">Bottom</div>
        <div class="uk-position-left uk-overlay uk-overlay-default uk-flex uk-flex-middle">Left</div>
        <div class="uk-position-right uk-overlay uk-overlay-default uk-flex uk-flex-middle">Right</div>
    </div>

Направления X и Y

Вы также можете установить более конкретные позиции, которые будут распространяться не только на одну сторону родительского контейнера, добавив один из следующих классов.

Класс Описание
.uk-position-top-left Позиционирует элемент вверху слева.
.uk-position-top-center Позиционирует элемент вверху по центру.
.uk-position-top-right Позиционирует элемент вверху справа.
.uk-position-center Расположение элемента вертикально по центру посередине.
.uk-position-center-left Расположение элемента вертикально по центру слева.
.uk-position-center-right Расположение элемента вертикально по центру справа.
.uk-position-bottom-left Располагает элемент внизу слева.
.uk-position-bottom-center Располагает элемент внизу по центру.
.uk-position-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="/demo/img/photo.jpg" alt="">
        <div class="uk-position-top-left uk-overlay uk-overlay-default">Top Left</div>
        <div class="uk-position-top-center uk-overlay uk-overlay-default">Top Center</div>
        <div class="uk-position-top-right uk-overlay uk-overlay-default">Top Right</div>
        <div class="uk-position-center-left uk-overlay uk-overlay-default">Center Left</div>
        <div class="uk-position-center uk-overlay uk-overlay-default">Center</div>
        <div class="uk-position-center-right uk-overlay uk-overlay-default">Center Right</div>
        <div class="uk-position-bottom-left uk-overlay uk-overlay-default">Bottom Left</div>
        <div class="uk-position-bottom-center uk-overlay uk-overlay-default">Bottom Center</div>
        <div class="uk-position-bottom-right uk-overlay uk-overlay-default">Bottom Right</div>
    </div>

Cover

Если вы хотите, чтобы элемент покрывал весь контейнер полностью, добавьте класс .uk-position-cover.

<div class="uk-position-cover"></div>
  • Cover
  • <div class="uk-inline">
        <img src="/demo/img/photo.jpg" alt="">
        <div class="uk-position-cover uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Cover</div>
    </div>

Снаружи : За пределами границы : Outside

Есть два класса для размещения элементов снаружи - класс слева и класс справа от родительского контейнера. Эти классы полезны при размещении Slidenav в компонентах Slideshow или Slider.

Класс Описание
.uk-position-center-left-out Позиционирует элемент вертикально по центру снаружи слева.
.uk-position-center-right-out Позиционирует элемент вертикально по центру снаружи справа.
Примечание Как только наружный позиционируемый элемент выходит из области просмотра справа, он вызывает горизонтальную полосу прокрутки. Используйте компонент Visibility, чтобы скрыть позиционируемый снаружи элемент на мелких экранах и вместо этого показать элемент внутри.
<div class="uk-position-center-left-out"></div>
  • Out
    Out
  • <div class="uk-inline">
        <img src="/demo/img/photo.jpg" alt="">
        <div class="uk-position-center-left-out uk-overlay uk-overlay-primary uk-visible@s">Out</div>
        <div class="uk-position-center-right-out uk-overlay uk-overlay-primary uk-visible@s">Out</div>
    </div>

Модификатор «Small»

Чтобы применить небольшой внешний отступ к позиционируемым элементам, добавьте класс .uk-position-small.

<div class="uk-position-small 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="/demo/img/photo.jpg" alt="">
        <div class="uk-position-small uk-position-top-left uk-overlay uk-overlay-default">Top Left</div>
        <div class="uk-position-small uk-position-top-center uk-overlay uk-overlay-default">Top Center</div>
        <div class="uk-position-small uk-position-top-right uk-overlay uk-overlay-default">Top Right</div>
        <div class="uk-position-small uk-position-center-left uk-overlay uk-overlay-default">Center Left</div>
        <div class="uk-position-small uk-position-center uk-overlay uk-overlay-default">Center</div>
        <div class="uk-position-small uk-position-center-right uk-overlay uk-overlay-default">Center Right</div>
        <div class="uk-position-small uk-position-bottom-left uk-overlay uk-overlay-default">Bottom Left</div>
        <div class="uk-position-small uk-position-bottom-center uk-overlay uk-overlay-default">Bottom Center</div>
        <div class="uk-position-small uk-position-bottom-right uk-overlay uk-overlay-default">Bottom Right</div>
    </div>
    <div class="uk-inline uk-margin">
        <img src="/demo/img/photo.jpg" alt="">
        <div class="uk-position-small uk-position-top uk-overlay uk-overlay-default uk-text-center">Top</div>
        <div class="uk-position-small uk-position-bottom uk-overlay uk-overlay-default uk-text-center">Bottom</div>
        <div class="uk-position-small uk-position-left uk-overlay uk-overlay-default uk-flex uk-flex-middle">Left</div>
        <div class="uk-position-small uk-position-right uk-overlay uk-overlay-default uk-flex uk-flex-middle">Right</div>
    </div>
    <div class="uk-inline uk-margin">
        <img src="/demo/img/photo.jpg" alt="">
        <div class="uk-position-small uk-position-cover uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Cover</div>
    </div>
    <div class="uk-margin uk-text-center">
        <div class="uk-inline-block uk-width-large">
            <img src="/demo/img/photo.jpg" alt="">
            <div class="uk-position-small uk-position-center-left-out uk-overlay uk-overlay-primary uk-visible@s">Out</div>
            <div class="uk-position-small uk-position-center-right-out uk-overlay uk-overlay-primary uk-visible@s">Out</div>
        </div>
    </div>

Модификатор «Medium»

Чтобы применить средний внешний отступ к позиционируемым элементам, добавьте класс .uk-position-medium.

<div class="uk-position-medium 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="/demo/img/photo.jpg" alt="">
        <div class="uk-position-medium uk-position-top-left uk-overlay uk-overlay-default">Top Left</div>
        <div class="uk-position-medium uk-position-top-center uk-overlay uk-overlay-default">Top Center</div>
        <div class="uk-position-medium uk-position-top-right uk-overlay uk-overlay-default">Top Right</div>
        <div class="uk-position-medium uk-position-center-left uk-overlay uk-overlay-default">Center Left</div>
        <div class="uk-position-medium uk-position-center uk-overlay uk-overlay-default">Center</div>
        <div class="uk-position-medium uk-position-center-right uk-overlay uk-overlay-default">Center Right</div>
        <div class="uk-position-medium uk-position-bottom-left uk-overlay uk-overlay-default">Bottom Left</div>
        <div class="uk-position-medium uk-position-bottom-center uk-overlay uk-overlay-default">Bottom Center</div>
        <div class="uk-position-medium uk-position-bottom-right uk-overlay uk-overlay-default">Bottom Right</div>
    </div>
    <div class="uk-inline uk-margin">
        <img src="/demo/img/photo.jpg" alt="">
        <div class="uk-position-medium uk-position-top uk-overlay uk-overlay-default uk-text-center">Top</div>
        <div class="uk-position-medium uk-position-bottom uk-overlay uk-overlay-default uk-text-center">Bottom</div>
        <div class="uk-position-medium uk-position-left uk-overlay uk-overlay-default uk-flex uk-flex-middle">Left</div>
        <div class="uk-position-medium uk-position-right uk-overlay uk-overlay-default uk-flex uk-flex-middle">Right</div>
    </div>
    <div class="uk-inline uk-margin">
        <img src="/demo/img/photo.jpg" alt="">
        <div class="uk-position-medium uk-position-cover uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Cover</div>
    </div>
    <div class="uk-margin uk-text-center">
        <div class="uk-inline-block uk-width-large">
            <img src="/demo/img/photo.jpg" alt="">
            <div class="uk-position-medium uk-position-center-left-out uk-overlay uk-overlay-primary uk-visible@s">Out</div>
            <div class="uk-position-medium uk-position-center-right-out uk-overlay uk-overlay-primary uk-visible@s">Out</div>
        </div>
    </div>

Модификатор «Large»

Чтобы применить большой внешний отступ к позиционируемым элементам, добавьте класс .uk-position-large.

<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="/demo/img/photo.jpg" alt="">
        <div class="uk-position-large uk-position-top-left uk-overlay uk-overlay-default">Top Left</div>
        <div class="uk-position-large uk-position-top-center uk-overlay uk-overlay-default">Top Center</div>
        <div class="uk-position-large uk-position-top-right uk-overlay uk-overlay-default">Top Right</div>
        <div class="uk-position-large uk-position-center-left uk-overlay uk-overlay-default">Center Left</div>
        <div class="uk-position-large uk-position-center uk-overlay uk-overlay-default">Center</div>
        <div class="uk-position-large uk-position-center-right uk-overlay uk-overlay-default">Center Right</div>
        <div class="uk-position-large uk-position-bottom-left uk-overlay uk-overlay-default">Bottom Left</div>
        <div class="uk-position-large uk-position-bottom-center uk-overlay uk-overlay-default">Bottom Center</div>
        <div class="uk-position-large uk-position-bottom-right uk-overlay uk-overlay-default">Bottom Right</div>
    </div>
    <div class="uk-inline uk-margin">
        <img src="/demo/img/photo.jpg" alt="">
        <div class="uk-position-large uk-position-top uk-overlay uk-overlay-default uk-text-center">Top</div>
        <div class="uk-position-large uk-position-bottom uk-overlay uk-overlay-default uk-text-center">Bottom</div>
        <div class="uk-position-large uk-position-left uk-overlay uk-overlay-default uk-flex uk-flex-middle">Left</div>
        <div class="uk-position-large uk-position-right uk-overlay uk-overlay-default uk-flex uk-flex-middle">Right</div>
    </div>
    <div class="uk-inline uk-margin">
        <img src="/demo/img/photo.jpg" alt="">
        <div class="uk-position-large uk-position-cover uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Cover</div>
    </div>
    <div class="uk-margin uk-text-center">
        <div class="uk-inline-block uk-width-large">
            <img src="/demo/img/photo.jpg" alt="">
            <div class="uk-position-large uk-position-center-left-out uk-overlay uk-overlay-primary uk-visible@s">Out</div>
            <div class="uk-position-large uk-position-center-right-out uk-overlay uk-overlay-primary uk-visible@s">Out</div>
        </div>
    </div>

Классы Utility

Этот компонент имеет ряд полезных классов для позиционирования:

Класс Описание
.uk-position-relative Добавьте этот класс, чтобы применить относительное позиционирование.
.uk-position-absolute Добавьте этот класс, чтобы применить абсолютное позиционирование.
.uk-position-fixed Добавьте этот класс, чтобы применить фиксированное позиционирование.
.uk-position-z-index Добавьте этот класс, чтобы применить z-индекс 1.
Документация
Компоненты