如何定位聚合物紙烤麪包元素

Question

使用聚合物初始化命令創建聚合物應用程序並選擇應用程序 - 抽屜模板。

在我-view1.html，掛紙toast.html和修改的模板和腳本如下：

<template> 
    <div class="card"> 
    <div class="circle">1</div> 
    <h1>View One</h1> 

    <button on-tap="handleTap">open</button> 

    <paper-toast id="toast0" text="This toast auto-closes after 3 seconds"></paper-toast> 

</div> 

</template> 

<script> 

Polymer({ 

    is: 'my-view1', 

    handleTap: function(){ 
    this.$.toast0.open(); 
    } 

    }); 

當單擊該按鈕，敬酒出現，但大多數的它出現在菜單抽屜後面，只有部分的烤麪包窗口可見。

我試圖用css居中，但它不起作用。設置z-index也不起作用。如何定位麪包窗口，使其不會隱藏在抽屜後面？

Answer 1

增加了以下CSS類來敬酒元素：

.mytoast { 
    width: 100%; 
    text-align: right; 

} 

現在敬酒窗口橫跨頁面和文字顯示對齊右端。

Answer 2

以下css也可以解決你的問題。

paper-toast { 
    width: 300px; 
    margin-left: calc(50vw - 150px); 
}