# position

The markup of every demo on <https://kuiper.oeds.it/position/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## placement

Varies: 9 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="position-relative height-s background-white-dark"><div class="position-top-left background-muted padding-4xs">top-left</div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="position-relative height-s background-white-dark"><div class="position-top-center background-muted padding-4xs">top-center</div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="position-relative height-s background-white-dark"><div class="position-top-right background-muted padding-4xs">top-right</div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="position-relative height-s background-white-dark"><div class="position-center-left background-muted padding-4xs">center-left</div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="position-relative height-s background-white-dark"><div class="position-center background-muted padding-4xs">center</div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="position-relative height-s background-white-dark"><div class="position-center-right background-muted padding-4xs">center-right</div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="position-relative height-s background-white-dark"><div class="position-bottom-left background-muted padding-4xs">bottom-left</div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="position-relative height-s background-white-dark"><div class="position-bottom-center background-muted padding-4xs">bottom-center</div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="position-relative height-s background-white-dark"><div class="position-bottom-right background-muted padding-4xs">bottom-right</div></div></div></div>
</div>
```

## edge

Varies: 6 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="position-relative height-s background-white-dark"><div class="position-top background-muted padding-4xs">top</div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="position-relative height-s background-white-dark"><div class="position-bottom background-muted padding-4xs">bottom</div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="position-relative height-s background-white-dark"><div class="position-left background-muted padding-4xs">left</div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="position-relative height-s background-white-dark"><div class="position-right background-muted padding-4xs">right</div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="position-relative height-s background-white-dark"><div class="position-center-horizontal background-muted padding-4xs">center-horizontal</div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="position-relative height-s background-white-dark"><div class="position-center-vertical background-muted padding-4xs">center-vertical</div></div></div></div>
</div>
```

## outside

Varies: the `padding-*` ladder over 2 rungs, `4xs` to `2xs`.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card padding-2xs"><div class="position-relative height-s background-white-dark"><div class="position-center-left-out background-muted padding-4xs">center-left-out</div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card padding-2xs"><div class="position-relative height-s background-white-dark"><div class="position-center-right-out background-muted padding-4xs">center-right-out</div></div></div></div>
</div>
```

## cover

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="position-relative height-s background-white-dark"><div class="position-cover background-muted padding-4xs">cover</div></div></div></div>
</div>
```

## size

One specimen per size rung, so the ladder reads as a single column. A rung sets the height, the type size and the horizontal padding together, and the sizeless specimen is identical to `-m` by construction.

Varies: the `position-*` ladder over 3 rungs, `s` to `l`.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="position-relative height-s background-white-dark"><div class="position-top-left position-s background-muted padding-4xs">s</div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="position-relative height-s background-white-dark"><div class="position-top-left position-m background-muted padding-4xs">m</div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="position-relative height-s background-white-dark"><div class="position-top-left position-l background-muted padding-4xs">l</div></div></div></div>
</div>
```

## mode

Varies: the `height-*` ladder over 2 rungs, `s` to `m`.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="height-s overflow-auto background-white-dark"><div class="position-relative background-muted padding-4xs">relative</div><p class="height-m">&nbsp;</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="height-s overflow-auto background-white-dark"><div class="position-absolute background-muted padding-4xs">absolute</div><p class="height-m">&nbsp;</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="height-s overflow-auto background-white-dark"><div class="position-sticky background-muted padding-4xs">sticky</div><p class="height-m">&nbsp;</p></div></div></div>
</div>
```

## z-index

Varies: 5 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="position-relative height-s background-white-dark"><div class="position-cover background-primary-light"></div><div class="position-center position-z-index-negative background-muted padding-4xs">z-index-negative</div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="position-relative height-s background-white-dark"><div class="position-cover background-primary-light"></div><div class="position-center position-z-index-zero background-muted padding-4xs">z-index-zero</div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="position-relative height-s background-white-dark"><div class="position-cover background-primary-light"></div><div class="position-center position-z-index background-muted padding-4xs">z-index</div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="position-relative height-s background-white-dark"><div class="position-cover background-primary-light"></div><div class="position-center position-z-index-high background-muted padding-4xs">z-index-high</div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="position-relative height-s background-white-dark"><div class="position-cover background-primary-light"></div><div class="position-center position-z-index-highest background-muted padding-4xs">z-index-highest</div></div></div></div>
</div>
```