# FloatingActionButton Positioning

The FloatingActionButton component provides options for positioning in relation to the browser viewport or a CSS containing block. The [`positionMode`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops#positionMode) property defines the positioning context, while the [`align`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops#align) and [`alignOffset`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops#alignOffset) properties place the button and fine-tune its distance from the edges.

## Position Mode

The FloatingActionButton can be positioned in one of two ways, depending on [`positionMode`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops#positionMode):

* `fixed` (Default)—Positions the FloatingActionButton relative to the viewport. It stays in the same place when the page scrolls.
* `absolute`—Positions the FloatingActionButton relative to the nearest positioned ancestor. If no positioned ancestor exists, the browser uses the page's initial containing block, and the button moves with page scrolling.

To position the FloatingActionButton relative to a specific area in `absolute` mode, render it inside that area and set a CSS position value, such as `relative`, on the area. The nearest positioned ancestor defines the containing block.

The following demo lets you compare fixed and absolute positioning while the page scrolls.

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

## Alignment

Use [`align`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops#align) to set the FloatingActionButton's horizontal and vertical position within the active positioning context.

The `horizontal` setting defines the possible horizontal alignment of the FloatingActionButton and provides the following options:

* `start`—Uses the start point of the container.
* `center`—Uses the center point of the container.
* `end` (Default)—Uses the end point of the container.

The `vertical` setting defines the possible vertical alignment of the FloatingActionButton and provides the following options:

* `top`—Uses the top point of the container.
* `middle`—Uses the middle point of the container.
* `bottom` (Default)—Uses the bottom point of the container.

> Centering the FloatingActionButton in both dimensions is not a typical use case. Still, you can adjust a centered position with [offsets](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/floatingactionbutton/positioning#offset). Setting `horizontal: 'center'` and `vertical: 'middle'` at the same time is not supported.

The following demo displays the supported horizontal and vertical alignment points.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/floatingactionbutton/positioning/source.txt)

## Offset

The FloatingActionButton allows you to use [`alignOffset`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops#alignOffset) to adjust the position set by [`align`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops#align).

The available offset keys are:

* `x`—Sets the horizontal offset.
* `y`—Sets the vertical offset.

For edge alignments, the default offset places the button 16 pixels from the container boundary. When an axis uses `center` or `middle`, an omitted offset places the button at 50% on that axis. A supplied value moves the button from the center.

For corner alignments, positive offsets move the button inward from its edges. At bottom-center, positive `x` moves the button right, and positive `y` moves it up. Negative offsets reverse those directions and can move the button beyond the container boundary.

The following demo lets you change the horizontal and vertical offsets in pixels.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/floatingactionbutton/align-offset/source.txt)

## Suggested Links

* [FloatingActionButton Overview](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/floatingactionbutton)
* [Appearance](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/floatingactionbutton/appearance)
* [API Reference of the FloatingActionButton](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops)