New to Kendo UI for jQuery? Start a free 30-day trial

PositionMode

configuration

Specifies CSS position of the FloatingActionButton in the document. Valid options are:

"absolute": positions the button relative to the nearest positioned ancestor .
"fixed": positions the button relative to the viewport.

positionMode

String

Default: 'fixed'

<button id="fab-fixed"></button>

<script>
    $('#fab-fixed').kendoFloatingActionButton({
        icon: 'home',
        align: 'bottom start'
    });
</script>

<div class="fab-container" style="width: 200px; height: 200px; position: relative;">
    <button id="fab-absolute"></button>
</div>

<script>
    $('#fab-absolute').kendoFloatingActionButton({
        icon: 'home',
        align: 'bottom start',
        positionMode: 'absolute'
    });
</script>