Позиционирование

Коллекция служебных классов UIkit 3 для позиционирования контента.

Как использовать

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

Внимание В примерах используются стили наложения из компонента Наложение. Используйте классы .uk-light или .uk-dark из компонента Инверсия для улучшения видимости контента на светлых или темных фонах.

Класс Описание
.uk-position-top Располагает элемент сверху.
.uk-position-left Располагает элемент слева.
.uk-position-right Располагает элемент справа.
.uk-position-bottom Располагает элемент снизу. 
<div class="uk-inline">

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

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

</div>
  • Сверху
    Снизу
    Слева
    Справа
  • <div class="uk-inline uk-margin">

    <img src="images/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="images/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>

Обложка

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

<div class="uk-position-cover"></div>
  • Обложка
  • <div class="uk-inline">

    <img src="images/photo.jpg" alt="">

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

</div>

Отображение за границей родителя

Существует два класса для центрирования элементов снаружи слева и справа от родительского контейнера. Это пригодится для позиционирования слайдерной навигации вне компонентов Слайд-шоу или Слайдер component.

Класс Описание
.uk-position-center-left-out Располагает элемент вертикально по центру, снаружи, слева.
.uk-position-center-right-out Располагает элемент вертикально по центру, снаружи, справа.

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

<div class="uk-position-center-left-out"></div>
  • Вне
    Вне
  • <div class="uk-inline">

    <img src="images/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>

Модификатор уменьшения

Чтобы применить небольшие поля к позиционируемым элементам, добавьте класс.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
    Сверху
    Снизу
    Слева
    Справа
    Обложка
    Вне
    Вне
  • <div class="uk-inline uk-margin">

    <img src="images/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="images/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="images/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="images/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>

Модификатор средних размеров

Чтобы применить поля средних размеров, добавьте класс .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
    Сверху
    Снизу
    Слева
    Справа
    Документация UIkit
    Обложка
    Вне
    Вне
  • <div class="uk-inline uk-margin">

    <img src="images/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="images/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="images/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="images/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>

Модификатор больших полей

Чтобы применить большие поля к элементам, используйте класс .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
    Сверху
    Снизу
    Слева
    Справа
    Документация UIkit
    Обложка
    Документация UIkit
    Вне
    Вне
  • <div class="uk-inline uk-margin">

    <img src="images/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="images/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="images/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="images/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>

Утилиты

Этот компонент имеет ряд классов утилит для общего позиционирования:

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