title: set Z index not working. button behind a container (HTML - CSS)
body: <p>I using Metro css (windows 8 style) and have a problem.
  I have container with alerts (the blue in the picture) ,
  and above , there is 'IT -CENTER ' , If I click there it open a button.
  the problem that the button behind the container..
  I try to set the Z index of the container to -1 , and it's not help.
  <img src="https://i.stack.imgur.com/2P9Rx.jpg" alt="enter image description here"></p>
  
  <p>the dropdownlist with the button(IT-CENTER):
      
                     
                       IT-CENTER
                    
                    
                    </p>
  
  <pre><code>              &lt;li style="z-index:3"&gt;&lt;a href="Login.aspx"&gt;התנתק&lt;/a&gt;&lt;/li&gt;
             &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>and the container(blue one):</p>
  
  <pre><code> &lt;div id="alerts-container" style="z-index:-1"&gt;
           &lt;div id="toast-example1" class="toast toasttext02 fade in"&gt;
              &lt;button type="button" class="close" data-dismiss="alert"&gt;&lt;/button&gt;
              &lt;div class="pull-left"&gt;
                 &lt;div class="toast-object icon-info-4"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="toast-body" style="text-align:right"&gt;
  </code></pre>
  
  <p>(it's without  the closing tags..)</p>
  
  <p>what should I do?</p>
  
  <p>thanks!!</p>