位置

コンテンツの位置を調整するためのユーティリティクラスのコレクションです。

使用方法

このコンポーネントを適用するには、ブロック要素に.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>

外部

親コンテナの左右の外側に要素を中央に配置するための2つのクラスがあります。これは、スライドショーまたはスライダーコンポーネントの外側にスライドナビゲーションコンポーネントを配置する場合に役立ちます。

クラス	説明
`.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を適用するには、このクラスを追加します。

ドキュメント

位置