跳到主要内容

文档

Position

一组用于定位内容的工具类。

用法

要应用该组件，请为块级元素添加一个 .uk-position-* 类。当用该组件把内容放置在图片上方时，为包裹图片和目标元素的容器元素添加 Utility 组件中的 .uk-inline 类，以建立定位上下文。

注意 这常用于定位 Overlay 组件的遮罩层。使用 Inverse 组件中的 .uk-light 或 .uk-dark 类来应用浅色或深色，以获得更好的可见性。

类 描述
.uk-position-top 将元素定位在顶部。
.uk-position-left 将元素定位在左侧。
.uk-position-right 将元素定位在右侧。
.uk-position-bottom 将元素定位在底部。 
<div class="uk-inline">

    <!-- Place any content, like an image, here -->

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

</div>
Top
Bottom
Left
Right
<div class="uk-inline uk-margin">

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

居中

你还可以添加以下类之一，应用更精确的定位，这些定位不会铺满父容器的一侧。

类 描述
.uk-position-center-horizontal 将元素从上到下居中定位。
.uk-position-center-vertical 将元素从左到右居中定位。 
<div class="uk-position-center-horizontal"></div>
Horizontal
Vertical
<div class="uk-inline">

    <img src="images/photo.jpg" width="1800" height="1200" alt="">

    <div class="uk-position-center-horizontal uk-overlay uk-overlay-default">Horizontal</div>
    <div class="uk-position-center-vertical uk-overlay uk-overlay-default">Vertical</div>

</div>

覆盖

如果希望定位元素覆盖其容器，只需添加 .uk-position-cover 类。

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

    <img src="images/photo.jpg" width="1800" height="1200" alt="">

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

</div>

外部

有两个类可以将元素居中放置到父容器外侧的左侧和右侧。这在把 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="images/photo.jpg" width="1800" height="1200" 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
Top
Bottom
Left
Right
Cover
Out
Out
<div class="uk-inline uk-margin">

    <img src="images/photo.jpg" width="1800" height="1200" 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" width="1800" height="1200" 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" width="1800" height="1200" 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" width="1800" height="1200" 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
Top
Bottom
Left
Right
Cover
Out
Out
<div class="uk-inline uk-margin">

    <img src="images/photo.jpg" width="1800" height="1200" 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" width="1800" height="1200" 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" width="1800" height="1200" 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" width="1800" height="1200" 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
Top
Bottom
Left
Right
Cover
Out
Out
<div class="uk-inline uk-margin">

    <img src="images/photo.jpg" width="1800" height="1200" 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" width="1800" height="1200" 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" width="1800" height="1200" 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" width="1800" height="1200" 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。
.uk-position-z-index-negative 添加该类以应用 z-index 为 -1。
.uk-position-z-index-high 添加该类以应用较高的 z-index，它是 UIkit 的 z-index 层叠中最小的一个。
.uk-position-z-index-highest 添加该类以应用较高的 z-index，它是 UIkit 的 z-index 层叠中最大的一个。