定位／Position

# 定位／Position

<p class="uk-text-lead">用于定位内容的实用class的集合。</p>

## Usage-用法

应用此组件，请在块元素内添加一个 `.uk-position-*` class。使用此组件将内容放置在图像顶部时，请将 [Utility 组件](utility.md#inline) 中的 `.uk-inline` class添加到图片以及内容的父容器元素中，以创建定位上下文。

**注意** 该组件通常用于 [Overlay 组件](overlay.md)中的遮罩层。使用 [Inverse component](inverse.md) 中的 `.uk-light` 或 `.uk-dark` class可以应用浅色或深色，以在深色或浅色背景上有更好的可见性。

| Class                 | 描述    |
|:----------------------|:------|
| `.uk-position-top`    | 定位到顶部 |
| `.uk-position-left`   | 定位到左侧 |
| `.uk-position-right`  | 定位到右侧 |
| `.uk-position-bottom` | 定位到底部 |

```html
<div class="uk-inline">

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

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

</div>
```

```example
<div class="uk-inline uk-margin">

    <img src="images/photo.jpg" 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 方向

您还可以添加以下class之一，应用更具体的定位效果。

| Class                        | 描述              |
|:-----------------------------|:----------------|
| `.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`  | 放置在右下角          |


```html
<div class="uk-position-top-right"></div>
```

```example
<div class="uk-inline">

    <img src="images/photo.jpg" 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-cover` class.


```html
<div class="uk-position-cover"></div>
```

```example
<div class="uk-inline">

    <img src="images/photo.jpg" alt="">

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

</div>
```

***

### 放在外面

有两个class可将元素居中放置在父容器的左侧和右侧的外面。这对于需要将 [Slidenav 组件](slidenav.md) 放置在 [Slideshow](slideshow.md) 或 [Slider](slider.md) 外部的时候非常有用。

| Class                           | 描述                 |
|:--------------------------------|:-------------------|
| `.uk-position-center-left-out`  | 将元素放置在左侧外部的垂直居中位置。 |
| `.uk-position-center-right-out` | 将元素放置在右侧外部的垂直居中位置。 |

**注意** 一旦外部定位的元素向右伸出视口，将导致出现水平滚动条。使用 [Visibility 组件](visibility.md) 可以在较小的视口中隐藏超出到外部的元素，只显示位于内部的元素。

```html
<div class="uk-position-center-left-out"></div>
```

```example
<div class="uk-inline">

    <img src="images/photo.jpg" 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>
```

***

## Small modifier-小型 margin

要对定位的元素应用较小的margin，请添加 `.uk-position-small` class.

```html
<div class="uk-position-small uk-position-center"></div>
```

```example
<div class="uk-inline uk-margin">

    <img src="images/photo.jpg" 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" 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" 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" 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>
```

***

## Medium modifier-中等 margin

要对定位的元素应用中等大小的margin，请添加 `.uk-position-medium` class。

```html
<div class="uk-position-medium uk-position-center"></div>
```

```example
<div class="uk-inline uk-margin">

    <img src="images/photo.jpg" 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" 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" 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" 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>
```

***

## Large modifier-大型margin

要对定位的元素应用较大的margin，请添加 `.uk-position-large` class。

```html
<div class="uk-position-large uk-position-center"></div>
```

```example
<div class="uk-inline uk-margin">

    <img src="images/photo.jpg" 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" 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" 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" 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>
```

***

## Utility classes-实用class

该组件具有许多常规的实用的定位class:

| Class                   | 描述          |
|:------------------------|:------------|
| `.uk-position-relative` | 应用相对定位      |
| `.uk-position-absolute` | 应用绝对定位      |
| `.uk-position-fixed`    | 应用固定定位      |
| `.uk-position-z-index`  | 应用z-index为1 |