title: fixed jquery mobile data-filter is transparent by default
body: <p>I have the following ul. I have a filter bar on top that is fixed. But when I scroll through the listview, the filter bar is transparent and you can see the listview behind it. Any way to make the filter bar the top layer? </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div data-role="page" class="div1"&gt;
          &lt;form id="wrapper1" action="DiseaseList.php" method="post" target="_blank" data-ajax="false"&gt;
              &lt;div id="wrapper"&gt;
                  &lt;ul class="ui-li ui-bar-b ui-first-child" id="list" data-role="listview" data-filter='true' data-inset="false" data-filter-theme="b" data-filter-placeholder="Filter symptoms..." data-theme="c" data-dividertheme="a"&gt;
                      //my php code filling the listview                                                       
                      ?&gt;
                  &lt;/ul&gt;  
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;       
  &lt;/body&gt;
  </code></pre>
  
  <p>Here is the css</p>
  
  <pre class="lang-css prettyprint-override"><code>#wrapper {
      padding-top : 50px;
  }
  #wrapper form {
      position : fixed;
      top      : 15px;
      left     : 15px;
      width    : 100%;
      z-index  : 1;
  }​ 
  </code></pre>