---
extends: _layouts.master
title: "Position"
---

# Position

The position utilities are primarily <code class="inline">position</code> property helpers.

```html
<!-- Using the utilities in HTML: -->

<div class="fixed"></div>
<div class="absolute"></div>
<div class="relative"></div>
```

```less
// Using the utilities in Less:

div {
  .fixed;
  .absolute;
  .relative;
}
```

## Pinning absolute content

Tailwind also provides pin utilties, useful for "pinning" absolutely positioned elements using the <code class="inline">top</code>, <code class="inline">right</code>, <code class="inline">bottom</code> and <code class="inline">left</code> properties.

```html
<!-- Using the utilities in HTML: -->

<div class="relative">
    <div class="absolute pin-t"></div>
</div>
```

```less
// Using the utilities in Less:

div {
  .pin;
  .pin-t;
  .pin-r;
  .pin-b;
  .pin-l;
  .pin-x;
  .pin-y;
}
```

## Responsive

The position utitlies can also be used with <a href="/responsive">responsive</a> prefixes:

```html
<!-- Using the utilities in HTML: -->

<div class="fixed sm:absolute md:relative"></div>
```

```less
// Using the utilities in Less:

div {
  .screen(md, {
    .relative;
  });
}
```