Question

我正在研究聚合物应用程序。我需要放置一个始终位于屏幕底部的按钮。我怎样才能实现同样的目标。

Answer 1

只需在主文档中保持其位置绝对并设置其左下边距。使位置绝对从标准流中移除元素并使其他元素忽略它。

Answer 2

要将按钮放在页面的右下角，请使用以下类：

<style is="custom-style">
    .bottom-right {
        position: fixed;
        right: 10px;
        bottom: 10px;  
    }
</style>

以下是位于页面右下角的两个按钮的示例。我将两个按钮放在纸质材料元素中，将两个按钮移动到一起。

<paper-material elevation="0" class="bottom-right">
    <paper-button raised>
        <iron-icon icon="icons:save"></iron-icon>Save
    </paper-button>
    <paper-button raised>
        <iron-icon icon="icons:cancel"></iron-icon>Cancel
    </paper-button>
</paper-material>

按钮通常放在纸张对话框中，在这种情况下，人们希望在对话框的右下角放置按钮。为了相对于最近的定位祖先移动按钮（而不是相对于视口定位，如固定），将位置更改为绝对，如下面的代码段所示。

<style is="custom-style">
    .bottom-right {
        position: absolute;
        right: 10px;
        bottom: 10px;  
    }
</style>

如何定位屏幕底部的聚合物纸张按钮

2 个答案: