Компонент Позиция 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>
Направления
Направления 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>
-
-
<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>
-
-
<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 |
Позиционирует элемент вертикально по центру снаружи справа. |
<div class="uk-position-center-left-out"></div>
-
-
<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>
-
-
<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>
-
-
<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>
-
-
<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>
-
-
<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. |