positionMode String (default: 'fixed')

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.

Example - fixed position

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

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

Example - absolute position

<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>
In this article