跳至主要內容

文件

定位

用於定位內容的實用程式類別集合。

使用方式

若要套用此組件，請將其中一個 .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。