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

Коллекция вспомогательных классов для позиционирования элементов, контента. Наложение элемента поверх другого. Размещения элементов снаружи контейнера. Модификаторы. Руководство.

Position: Применение

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

Чтобы применить компонент Позиция, добавьте один из классов .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>

Направления 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>

Позиции center-X & center-Y

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

Класс	Описание
`.uk-position-center-horizontal`	Располагает элемент по центру сверху вниз.
`.uk-position-center-vertical`	Располагает элемент по центру слева направо.

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

Cover

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

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

Снаружи

Позиция элемента за пределами границы

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

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

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

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

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

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

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

Примеры

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

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

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

Примеры

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

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

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

Примеры

Дополнительные классы

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

Класс	Описание
`.uk-position-relative`	Добавьте этот класс, чтобы применить относительное позиционирование. Элемент позиционируется в соответствии с нормальным потоком документа.
`.uk-position-absolute`	Добавьте этот класс, чтобы применить абсолютное позиционирование. Элемент позиционируется относительно своего ближайшего предка, если таковой имеется; в противном случае он разместится относительно исходного содержащего блока.
`.uk-position-fixed`	Добавьте этот класс, чтобы применить фиксированное позиционирование.
`.uk-position-sticky`	Добавьте этот класс, чтобы применить липкое позиционирование. Липкий элемент «прилипает» к своему ближайшему предку. Закрепленный элемент рассматривается как «застрявший» до тех пор, пока не встретится край содержащего его блока .
`.uk-position-z-index`	Добавьте этот класс, чтобы применить z-индекс 1.
`.uk-position-z-index-zero`	Добавьте этот класс, чтобы применить z-индекс 0.
`.uk-position-z-index-negative`	Добавьте этот класс, чтобы применить z-индекс -1.
`.uk-position-z-index-high`	Добавьте этот класс, чтобы применить z-индекс 990.