Floating DOM , Fixed Position - Telerik Kendo-Mobile AppBuilder Icenium

I am using Telerik Kendo-Mobile AppBuilder Icenium, building a hybrid application. I have checked other posts, on the same topic, but none worked. I am thinking there may be something Kendo specific and that someone knows how to solve this. On a specific view

    <div data-role="view"
     data-title="Rules..."
     data-layout="main"
     data-model="app.workoutTypeRuleInterstatial"
     data-show="app.workoutTypeRuleInterstatial.onShow"
     data-after-show="app.workoutTypeRuleInterstatial.afterShow"
     id="workoutTypeRuleInterstatial_View">

    <ul data-role="listview"
        data-auto-bind="false"
        data-style="inset"
        data-template="workoutTypeRuleInterstatialModelTemplate"
        data-bind="{ source: workoutTypeRuleInterstatialModel.dataSource }"
        data-pull-to-refresh="true"
        data-endless-scroll="false"></ul>

    <script type="text/x-kendo-template" id="workoutTypeRuleInterstatialModelTemplate">
        <div class="image-with-text">
            <table style="width: 100%;">
                <tr>
                    <td style="width:100%;">
                        <a onclick="app.workoutTypeRuleInterstatial.workoutRuleClick('#: TypeId #')">
                            <h4 id="id" class="workoutRule">#: Name #</h4>
                        </a>
                    </td>
                </tr>
            </table>
        </div>
    </script>


    <div id="addButton">
        <img src="images/add.png" class="button" id="addNewWorkoutType" />
    </div>

</div>

and this css

    <style>
    #addButton {
        top: 70%;
        left: 90%;
        width: 2.3em;
        height: 2.3em;
        margin-top: -9em;
        margin-left: 0em;
        border: 0;
        position: fixed;
    }

    .button {
        padding: 0;
        width: 2.3em;
        height: 2.3em;
    }
</style>

does not allow the element to remain "fixed" in position when scrolling the list, it scrolls with the list and I want it to be like the image below (where it doesn't scroll with the list)

The answer is:

<footer data-role="footer">
    <div data-role="tabstrip" id="navigation-container">
        <a href="components/homeView/view.html" data-icon="home">Home View</a>
        <a href="components/settingsView/view.html" data-icon="settings">Settings</a>
        <a href="components/contactsView/view.html" data-icon="contacts">Contacts</a>
    </div>
    <a data-role="button" class="floating" data-icon="compose"></a>
</footer>

<style>
    .km-nova .km-button.floating {
        position: fixed;
        right: 20px;
        bottom: 70px;
        border-color: transparent;
        border-radius: 35px;
        width: 50px;
        height: 50px;
        line-height: 35px;
        background-color: red;
        color: white;
    }

        .km-nova .km-button.floating span {
            font-size: 1.5em;
        }
</style>