Компонент Позиция 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" width="1800" height="1200" 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" width="1800" height="1200" 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
    Cover
  • <div class="uk-inline">
        <img src="/demo/img/photo.jpg" width="1800" height="1200" alt="Cover">
        <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>
  • Outside
    Out
    Out
  • <div class="uk-inline">
        <img src="/demo/img/photo.jpg" width="1800" height="1200" alt="Outside">
        <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>
  • Small
    Top Left
    Top Center
    Top Right
    Center Left
    Center
    Center Right
    Bottom Left
    Bottom Center
    Bottom Right
    Top
    Bottom
    Left
    Right
  • <div class="uk-inline uk-margin">
        <img src="/demo/img/photo.jpg" width="1800" height="1200" alt="Small">
        <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" width="1800" height="1200" lt="Small">
        <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>
  • Small
    Cover
    Small
    Out
    Out
  • <div class="uk-inline uk-margin">
        <img src="/demo/img/photo.jpg" width="1800" height="1200" alt="Small">
        <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" width="1800" height="1200" alt="Small">
            <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>
  • Medium
    Top Left
    Top Center
    Top Right
    Center Left
    Center
    Center Right
    Bottom Left
    Bottom Center
    Bottom Right
    Medium
    Top
    Bottom
    Left
    Right
    Medium
    Cover
    Medium
    Out
    Out
  • <div class="uk-inline uk-margin">
        <img src="/demo/img/photo.jpg" width="1800" height="1200" alt="Medium">
        <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" width="1800" height="1200" alt="Medium">
        <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" width="1800" height="1200" alt="Medium">
        <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" width="1800" height="1200" alt="Medium">
            <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>
  • Large
    Top Left
    Top Center
    Top Right
    Center Left
    Center
    Center Right
    Bottom Left
    Bottom Center
    Bottom Right
    Large
    Top
    Bottom
    Left
    Right
    Large
    Cover
    Large
    Out
    Out
  • <div class="uk-inline uk-margin">
        <img src="/demo/img/photo.jpg" width="1800" height="1200" alt="Large">
        <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" width="1800" height="1200" alt="Large">
        <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" width="1800" height="1200" alt="Large">
        <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" width="1800" height="1200" alt="Large">
            <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-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.