浮动 DOM ，固定位置 - Telerik Kendo-Mobile AppBuilder Icenium答案

【问题标题】：Floating DOM , Fixed Position - Telerik Kendo-Mobile AppBuilder Icenium浮动 DOM ，固定位置 - Telerik Kendo-Mobile AppBuilder Icenium
【发布时间】：2017-02-15 21:42:12
【问题描述】：

我正在使用 Telerik Kendo-Mobile AppBuilder Icenium，构建一个混合应用程序。我检查了其他关于同一主题的帖子，但没有一个有效。我在想可能有剑道特有的东西，有人知道如何解决这个问题。在特定视图上

    <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>

还有这个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>

滚动列表时不允许元素保持“固定”位置，它会随列表滚动，我希望它像下图一样（不随列表滚动）

【问题讨论】：

标签： css telerik kendo-mobile

【解决方案1】：

答案是：

<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>

【讨论】：