# Positioning

The AppBar enables you to specify its position relative to the page content.

## Position

To specify where the AppBar will be displayed, use the [`position`](https://www.telerik.com/kendo-vue-ui/components/layout/api/appbarprops#position) property.

The AppBar provides the following options for setting its position:

* `top`(Default)—Positions the AppBar at the top of the content. Setting the `position` property to `top` requires adding the AppBar component before the page content. The position property applies CSS `top: 0` style in [`fixed mode`](https://www.telerik.com/kendo-vue-ui/components/layout/api/appbarprops#positionmode) and also adds a `box-shadow` to the bottom of the AppBar.
* `bottom`—Positions the AppBar at the bottom of the content. Setting the `position` property to `bottom` requires adding the AppBar component after the page content. The position property applies CSS `bottom: 0` style in [`fixed mode`](https://www.telerik.com/kendo-vue-ui/components/layout/api/appbarprops#positionmode) and also adds a `box-shadow ` to the top of the AppBar.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/layout/appbar/position/source.txt)

## Position Mode

To specify the type of positioning mode used for the AppBar, use the [`positionMode`](https://www.telerik.com/kendo-vue-ui/components/layout/api/appbarprops#positionmode) property.

The AppBar provides the following options for setting the position mode:

* `static`(Default)—Does not position the AppBar in any special way. It is positioned according to the normal flow of the page.
* `sticky`—Positions the AppBar based on the user's scroll position. A sticky element toggles between static and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
* `fixed`—Positions the AppBar relative to the viewport. It always stays in the same place even if the page is scrolled.

> When you render the AppBar with `:position-mode="'fixed'"`, the dimension of the element doesn't impact the rest of the page. This can cause parts of the content to be invisible, behind the AppBar. In this case either set padding of the page content or set `sticky` position mode.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/layout/appbar/position-mode/source.txt)

## Suggested Links

* [API Reference of the AppBarProps](https://www.telerik.com/kendo-vue-ui/components/layout/api/appbarprops)