title: Angular Material Transparent Toolbar
body: <p>I'm using angular material on a rails app, want a toolbar to sit on top of an image and make that toolbar clear so you can see the image behind it. Here is the code so far:</p>
  
  <pre><code>&lt;div layout="column" layout-fill&gt;
  &lt;div layout="row"&gt;
      &lt;img src="http://www.outsideonline.com/sites/default/files/styles/full-page/public/yosemite-smart-black-bear_h.jpg?itok=kKS8ILd9"&gt;
      &lt;md-toolbar id="toolbar" class="transparent"&gt;
          &lt;div class="md-toolbar-tools"&gt;
              &lt;span&gt;Turbo Mortgages&lt;/span&gt;
              &lt;!-- fill up the space between left and right area --&gt;
              &lt;span flex&gt;&lt;/span&gt;
              &lt;md-button ui-sref="app.register"
                         aria-label="Toggle Mobile Navigation"&gt;
                  About
              &lt;/md-button&gt;
              &lt;md-button ui-sref="app.join"
                         aria-label="Toggle Mobile Navigation"&gt;
                  Join
              &lt;/md-button&gt;
              &lt;md-button ui-sref="app.login"
                         aria-label="Toggle Mobile Navigation"&gt;
                  Login
              &lt;/md-button&gt;
          &lt;/div&gt;
      &lt;/md-toolbar&gt;
  &lt;/div&gt;
  &lt;md-content&gt;
      &lt;ng-view&gt;&lt;/ng-view&gt;
  &lt;/md-content&gt;
  </code></pre>
  
  <p></p>
  
  <p>and what I see on the page right now is just the image...here is the css:</p>
  
  <pre><code>#toolbar {
      position:relative;
      z-index:1000;
  }
  </code></pre>
  
  <p>how do i get the toolbar to lay on top of the image if not with z-index? thanks for help!</p>