# Positioning

The FloatingToolBar provides two positioning modes: anchored and free. In both modes, it keeps its position in sync with the anchor or container while the page scrolls or resizes.

The following sections describe how to position the FloatingToolBar and control its behavior:

<Row>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#anchored-mode">
      <ComponentTitle>Anchored Mode</ComponentTitle>
      <ComponentDescription>Position the component relative to a target element.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#free-position-mode">
      <ComponentTitle>Free-Position Mode</ComponentTitle>
      <ComponentDescription>Align the component within its containing element.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#controlling-visibility">
      <ComponentTitle>Controlling Visibility</ComponentTitle>
      <ComponentDescription>Show and hide the component, for example, on text selection.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#setting-the-margin">
      <ComponentTitle>Setting the Margin</ComponentTitle>
      <ComponentDescription>Control the gap to the anchor or the inset from the container.</ComponentDescription>
    </Component>
  </Column>
</Row>

## Anchored Mode

To position the FloatingToolBar relative to a target element, set the [`anchor`](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/floatingtoolbarcomponent#anchor) property to a reference of that element. Use the [`position`](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/floatingtoolbarcomponent#position) property to specify the preferred side of the anchor on which the component renders.

The available `position` values are:

* `top` (default)
* `bottom`
* `left`
* `right`

If the preferred side does not have enough space, collision handling flips the component automatically. The FloatingToolBar also follows the anchor while the page scrolls or the viewport resizes.

The following example demonstrates a rich-text editor toolbar anchored to a highlighted phrase in a sample document. Use the configurator to change the `position` value.

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

## Free-Position Mode

When no `anchor` is set, the FloatingToolBar renders in free-position mode and is placed within its containing element according to the [`containerAlign`](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/floatingtoolbarcomponent#containeralign) property.

The `containerAlign` property accepts `horizontal` and `vertical` keys. Its default value is `{ horizontal: 'center', vertical: 'top' }`.

The available `horizontal` values are:

* `left`
* `center` (default)
* `right`

The available `vertical` values are:

* `top` (default)
* `center`
* `bottom`

The following example demonstrates how `containerAlign` positions the FloatingToolBar within its containing element. Use the configurator to change the `horizontal` and `vertical` values.

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

## Controlling Visibility

To show and hide the component, render the FloatingToolBar conditionally, for example, only while a text selection exists. When you render the component, set the `anchor` property to an element that matches the current selection.

The following example displays the FloatingToolBar above a text selection. Select a portion of the text to show the component. Clear the selection to hide it.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/toolbar/floating-toolbar/visibility/source.txt)

## Setting the Margin

Use the [`margin`](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/floatingtoolbarcomponent#margin) property to control the spacing of the FloatingToolBar. In anchored mode, `margin` sets the gap between the FloatingToolBar and the anchor. In free-position mode, `margin` sets the inset from the containing element.

The following example demonstrates how increasing the `margin` value insets a bottom-aligned FloatingToolBar from the edge of its containing element.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/toolbar/floating-toolbar/margin/source.txt)

## Suggested Links

* [API Reference of the FloatingToolBar](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/floatingtoolbarcomponent)
* [Dragging](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/floating-toolbar/dragging)