---
title: CSS Positioning Classes
desc: >-
  The list of CSS classes supplied by Quasar to simplify the positioning of a
  DOM element.
related:
  - title: Typography
    path: typography.md
  - title: CSS Visibility
    path: visibility.md
  - title: CSS Spacing Classes
    path: spacing.md
---
There are CSS classes supplied by Quasar to help you position a DOM element easily:

| Class Name | Description |
| --- | --- |
| `fullscreen` | Fix position covering all window real-estate |
| `fixed` | Set `position` to `fixed` without specifying `top`, `left`, `right` or `bottom` properties |
| `fixed-center` | Set position to `fixed` but in the middle of window. |
| `absolute` | Set `position` to `absolute` without specifying `top`, `left`, `right` or `bottom` properties |
| `absolute-center` | Set position to `absolute` but in the middle of the container (container needs relative position). |
| `fixed-top` `absolute-top` | Fixed or absolute position to top of screen |
| `fixed-right` `absolute-right` | Fixed or absolute position to the right edge of screen |
| `fixed-bottom` `absolute-bottom` | Fixed or absolute position to bottom of screen |
| `fixed-left` `absolute-left` | Fixed or absolute position to the left edge of screen |
| `fixed-top-left` `absolute-top-left` | Fixed or absolute position to top left of screen |
| `fixed-top-right` `absolute-top-right` | Fixed or absolute position to top right of screen |
| `fixed-bottom-left` `absolute-bottom-left` | Fixed or absolute position to bottom left of screen |
| `fixed-bottom-right` `absolute-bottom-right` | Fixed or absolute position to bottom right of screen |
| `fixed-full` `absolute-full` | Fixed or absolute position to all screen edges |
| `relative-position` | Set position to `relative` |

## Alignment

| Class Name | Description |
| --- | --- |
| `float-left` | Float to the left |
| `float-right` | Float to the right |
| `on-left` | Sets a small margin to the right; commonly used for icon elements with other siblings |
| `on-right` | Sets a small margin to the left; commonly used for icon elements with other siblings |

> [!TIP]
> Instead of using `float-left` or `float-right` we recommend that you read on the Quasar Grid System.

Vertical alignment:

| Class Name | Description |
| --- | --- |
| `vertical-top` | Set CSS vertical alignment to `top` |
| `vertical-middle` | Set CSS vertical alignment to `middle` |
| `vertical-bottom` | Set CSS vertical alignment to `bottom` |