title: How to position polymer paper-toast element
body: <p>Created Polymer app using polymer init command and selecting app-drawer-template.</p>
  
  <p>In my-view1.html, linked to paper-toast.html and modified the template and script as follows:</p>
  
  <pre><code> &lt;template&gt;
     &lt;div class="card"&gt;
     &lt;div class="circle"&gt;1&lt;/div&gt;
     &lt;h1&gt;View One&lt;/h1&gt;
  
     &lt;button on-tap="handleTap"&gt;open&lt;/button&gt;
  
     &lt;paper-toast id="toast0" text="This toast auto-closes after 3 seconds"&gt;&lt;/paper-toast&gt;
  
  &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  
   Polymer({
  
     is: 'my-view1',
  
      handleTap: function(){
      this.$.toast0.open();
    }
  
    });
  </code></pre>
  
  <p></p>
  
  <p>When the button is clicked, the toast appears but most of it appears behind the Menu drawer and only part of the toast window is visible. </p>
  
  <p>I tried to center the toast using css but it does not work. Setting z-index did not work either. How can the toast window be positioned so it is not hidden behind the drawer?    </p>