位置

一套用于定位内容的实用程序类。

用法

要应用此组件，请将一个 .uk-position-* 类添加到块级元素中。当使用此组件将内容放置在图像之上时，请将实用程序组件中的 .uk-inline 类添加到围绕图像和元素的容器元素中以创建位置上下文。

注意这通常用于定位来自叠加层组件的叠加层。使用反转组件中的 .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>

顶部

底部

左侧

右侧

<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>

左上角

顶部中央

右上角

左中

中央

右中

左下角

底部中央

右下角

<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>

水平

垂直

<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>

封面

<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>

外部

有两个类可以将元素居中在父容器的左侧和右侧外部。这对于将滑动导航组件定位在幻灯片组件或滑块组件外部很有用。

类	描述
`.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" 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>

左上角

顶部中央

右上角

左中

中央

右中

左下角

底部中央

右下角

顶部

底部

左侧

右侧

封面

外部

外部

<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>

左上角

顶部中央

右上角

左中

中央

右中

左下角

底部中央

右下角

顶部

底部

左侧

右侧

封面

外部

外部

<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>

左上角

顶部中央

右上角

左中

中央

右中

左下角

底部中央

右下角

顶部

底部

左侧

右侧

封面

外部

外部

<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。

文档

位置