1

我有以下 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;
}​
4

1 回答 1

0

嗨，塞尔吉，我遇到了完全相同的问题。试着用你的 Z-index 玩一点。Z-index 将优先级放在您的项目上。因此 ul 链接比您的搜索框具有更高的优先级，这就是为什么当您向下滚动时会出现链接的原因。尝试使用 3 或 4 之类的东西。它应该可以解决问题。

我为你做了一个jsfiddle：

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;
}

亲切的问候，马蒂亚斯！

于 2013-10-01T11:50:51.983 回答