# Position

###### Bootstrap position utilities allow you to control the positioning of elements using CSS properties like `relative`, `absolute`, `fixed`, `sticky`, and `static` to create flexible layouts.

Positions can also be changed for mobile viewports by adding the following classes, `.position-on-mobile-absolute`, `.position-on-mobile-relative`, and `.position-on-mobile-static`

## Position Fixed

An element with `.position-fixed`; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The `top`, `right`, `bottom`, and `left` properties are used to position the element

## Position Relative

In `.position-relative`, the element is positioned relative to itself. However, an absolute positioned element is relative to its parent. An element with `position: absolute` is removed from the normal document flow. ... If it doesn't have any parent elements, then the initial document `html` will be its parent
.position-relative

.position-absolute

.position-relative
.position-relative

.position-absolute

## Position Absolute

An element with `.position-absolute`; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. You can use `.pos-top`, `.pos-right`, `.pos-bottom`, and `.pos-left` to position relavant to its closest relative positioned ancenstor
.position-absolute .pos-top
.position-absolute .pos-bottom
.position-absolute .pos-right

## Position Sticky

Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The `.sticky-top` utility uses CSS’s `position: sticky`, which isn’t fully supported in all browsers.

##### Sticky Element: Scroll Down to See the Effect Scroll down this page to see how sticky positioning works

Some example text..

##### Scroll back up again to "remove" the sticky position.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices

1..

...

...

...

4..

...

...

...

8..

...

...

...

12.

...

...

...

16.

...

...

...

20.

...

...

...

24.

## Position Static

Every element has a static position by default, so the element will stick to the normal page flow. So if there is a left/right/top/bottom/z-index set then there will be no effect on that element. Adding `.position-static` will generally 'reset' these properties
.position-relative
.position-static

.position-absolute

#### Hi Sunny,

how can I help you today?
Analyze my data

Create a new report

Summarize my Calendar

App Builder
Unlock limitless design potential with 16+ layout combinations and extensive customization options—tailor your dashboard to fit your exact needs.
Header position fixed
Navigation full height
Navigation position fixed
Navigation collapsed
Navigation Minified
Dark Navigation
Colorblind Mode
High Contrast Mode