# Configuring the Position

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

## Position

To specify where the AppBar will be displayed, use its [`position`](https://www.telerik.com/kendo-angular-ui/components/navigation/api/appbarcomponent#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 you to add the Appbar component before the page content. `position` applies the `top: 0` CSS style in the [`fixed mode`](https://www.telerik.com/kendo-angular-ui/components/navigation/api/appbarcomponent#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 you to add the Appbar component after the page content. `position` applies the `bottom: 0` CSS style in the [`fixed mode`](https://www.telerik.com/kendo-angular-ui/components/navigation/api/appbarcomponent#positionMode) and also adds a `box-shadow` to the top of the AppBar.

The following example demonstrates how to set the `position` property of the AppBar.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/navigation/appbar/positioning/source.txt)

## Position Mode

To specify the type of the positioning mode for the AppBar, use the [`positionMode`](https://www.telerik.com/kendo-angular-ui/components/navigation/api/appbarcomponent#positionMode) property.

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

* `static`(Default)—The AppBar is positioned according to the normal flow of the page.
* `sticky`—Positions the AppBar based on the scroll position of the user. A sticky element toggles between the 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 in relation to the viewport. It always stays in the same place even if the page is scrolled.

> When you render the AppBar with `positionMode="fixed"`, the dimension of the element doesn't impact the rest of the page. As a result, parts of the content behind the AppBar may become invisible. In this case, either define the padding of the page content or set the `sticky` position mode.

The following example demonstrates how to set the `positionMode` property of the AppBar.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/navigation/appbar/positioning/position_mode/source.txt)

## Suggested Links

* [API Reference of the AppBar Component](https://www.telerik.com/kendo-angular-ui/components/navigation/api/appbarcomponent)