title: Z-index of scrollbar thumb in Firefox
body: <p>I'm trying to style the scrollbar in firefox to achieve the look of the scrollbar in OS X Lion.
  here's my code for stylish:</p>
  
  <pre><code>scrollbarbutton {-moz-appearance: none !important}
  
  scrollbar, scrollcorner { -moz-appearance: none !important;
  background-color: transparent !important;
  }
  
  scrollbar[orient='vertical'] { border-left: 0; -moz-transform:translateX(10px)}
  scrollbar[orient='horizontal'] { border-top: 0; }
  
  thumb { -moz-appearance: none !important;
  border-color: red !important;
  background: transparent;
  opacity: .5;
  border-style: solid;
  }
  
  thumb:hover, thumb:active {opacity: 1}
  
  thumb[orient='vertical'] {
  -moz-border-image: url(http://i.imgur.com/mxzFF.png) 15 0 15 0 fill;
  border-width: 8px 0 8px 0;
  -moz-transform:translateX(-10px);
  z-index: 10000
  }
  </code></pre>
  
  <p>However, the z-index setting does nothing, the page content overlays the scrollbar thumb.</p>