# Positioning
The FloatingToolBar for ASP.NET Core can be aligned inside its closest positioned container or anchored to a target element. Set the `Anchor()` option to use the anchored mode. When `Anchor()` is not set, the component uses the free-position mode.
## Aligning in a Container
In the free-position mode, the toolbar is placed inside the closest ancestor whose CSS `position` is `relative`, `absolute`, `fixed`, or `sticky`. If no such ancestor exists, the toolbar is aligned to the document body.
Use the `ContainerAlign()` option to set the alignment:
* `Horizontal()`—Accepts `FloatingToolBarHorizontalAlign.Left`, `Center`, or `Right`.
* `Vertical()`—Accepts `FloatingToolBarVerticalAlign.Top`, `Center`, or `Bottom`.
The `Margin()` option adds horizontal and vertical offsets in pixels. Use negative values to move the toolbar up or to the left.
```Razor HtmlHelper
Invoice INV-30871 for 120 units of laboratory reagents is awaiting approval.
@(Html.Kendo().FloatingToolBar()
.Name("floatingtoolbar")
.Visible(true)
.ContainerAlign(align => align
.Horizontal(FloatingToolBarHorizontalAlign.Right)
.Vertical(FloatingToolBarVerticalAlign.Bottom))
.Margin(margin => margin.Horizontal(-12).Vertical(-16))
.Items(items =>
{
items.Add().Type(CommandType.Button).Text("Approve").Icon("check");
items.Add().Type(CommandType.Button).Text("Reject").Icon("cancel");
})
)
```
```Razor TagHelper
Invoice INV-30871 for 120 units of laboratory reagents is awaiting approval.
```
> The FloatingToolBar detects the positioned container when it initializes. Make sure the `position` style of the container is applied before the component initializes, for example, by using an inline style or a stylesheet loaded in the `` of the page.
## Anchoring to an Element
Set the `Anchor()` option to a selector of the target element. The `Position()` option sets the side of the target at which the toolbar appears and accepts `FloatingToolBarPosition.Top` (default), `Bottom`, `Left`, or `Right`. When the requested side does not have enough room, the toolbar flips or shifts to stay in view.
When `Anchor()` is set, the `ContainerAlign()` option is ignored. The `Margin()` option still applies.
```Razor HtmlHelper
Shipment SH-20418 is ready for customs review.
@(Html.Kendo().FloatingToolBar()
.Name("floatingtoolbar")
.Visible(true)
.Anchor("#shipment-note")
.Position(FloatingToolBarPosition.Bottom)
.Margin(margin => margin.Vertical(8))
.Items(items =>
{
items.Add().Type(CommandType.Button).Text("Review").Icon("eye");
items.Add().Type(CommandType.Button).Text("Comment").Icon("comment");
})
)
```
```Razor TagHelper
Shipment SH-20418 is ready for customs review.