---
title: "Core — position"
canonical: https://sky-ui.cf.sky.com/core/system/position
---

# Core — position

Applying the `position` system modifier to your component will allow consumers of your component to pass in the following props:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `$position` | [(See MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/position) | undefined | Applies position styles |
| `$top` | [(See MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/top) | undefined | Applies top styles |
| `$bottom` | [(See MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) | undefined | Applies bottom styles |
| `$left` | [(See MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/left) | undefined | Applies left styles |
| `$right` | [(See MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/right) | undefined | Applies right styles |
| $zIndex | number | undefined | Applies zIndex styles |

## z-index stacking order

We use the following rule of thumb:

- `>= 300` Modals
- `251` Reserved for Masthead
- `100 - 200` Inline overlays (popovers, tooltips etc)
- `< 100` Components