固定jquery移动数据过滤器默认情况下是透明的

我有以下ul。我在上面有一个固定的过滤条。但是当我滚动浏览列表视图时，过滤栏是透明的，你可以看到它后面的列表视图。有什么方法可以让过滤栏成为顶层吗？

<body>
    <div data-role="page" class="div1">
        <form id="wrapper1" action="DiseaseList.php" method="post" target="_blank" data-ajax="false">
            <div id="wrapper">
                <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">
                    //my php code filling the listview                                                       
                    ?>
                </ul>  
            </div>
        </form>
    </div>       
</body>

这是css

#wrapper {
    padding-top : 50px;
}
#wrapper form {
    position : fixed;
    top      : 15px;
    left     : 15px;
    width    : 100%;
    z-index  : 1;
}

嗨，Serge，我也遇到了同样的问题。试着玩一点你的Z指数。Z索引，将优先级放在您的物品上。因此，ul链接的优先级高于搜索框，这就是为什么向下滚动时会出现链接的原因。试着用3或4之类的词。它应该起作用。

我为你做了一把小提琴：

http://jsfiddle.net/matunga/hMCkr/

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-
    1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    <div data-role="page">
        <div data-role="content">
            <div id="my-wrapper">
                <ul data-filter="true" data-role="listview">
                    <li><a href="#Page2">1</a>
                    </li>
                    <li><a href="#Page2">2</a>
                    </li>
                    <li><a href="#Page2">3</a>
                    </li>
                    <li><a href="#Page2">4</a>
                    </li>
                    <li><a href="#Page2">5</a>
                    </li>
                    <li><a href="#Page2">6</a>
                    </li>
                    <li><a href="#Page2">7</a>
                    </li>
                    <li><a href="#Page2">8</a>
                    </li>
                    <li><a href="#Page2">9</a>
                    </li>
                    <li><a href="#Page2">10</a>
                    </li>
                    <li><a href="#Page2">11</a>
                    </li>
                    <li><a href="#Page2">12</a>
                    </li>
                    <li><a href="#Page2">13</a>
                    </li>
                    <li><a href="#Page2">14</a>
                    </li>
                    <li><a href="#Page2">15</a>
                    </li>
                    <li><a href="#Page2">16</a>
                    </li>
                    <li><a href="#Page2">17</a>
                    </li>
                    <li><a href="#Page2">18</a>
                    </li>
                    <li><a href="#Page2">19</a>
                    </li>
                    <li><a href="#Page2">20</a>
                    </li>
                    <li><a href="#Page2">21</a>
                    </li>
                    <li><a href="#Page2">22</a>
                    </li>
                    <li><a href="#Page2">23</a>
                    </li>
                    <li><a href="#Page2">24</a>
                    </li>
                    <li><a href="#Page2">25</a>
                    </li>
                    <li><a href="#Page2">26</a>
                    </li>
                    <li><a href="#Page2">27</a>
                    </li>
                    <li><a href="#Page2">28</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    #my-wrapper {
    padding-top : 45px;
}
#my-wrapper form {
    position :fixed;
    top : 15px;
    left : 15px;
    width : 100%;
    z-index : 2;
}

致以诚挚的问候，马蒂亚斯！

相关内容

最新更新

热门标签：