选择容器下的选项

Question

我正在使用angular-chosen指令为angularjs项目使用所选的下拉列表。

我目前正在努力实现一个分页表，而且我的体内容器div下面出现的下拉选项存在问题。

这是相关的html

<section>
    <div class="row">
        <div class="col-lg-12">
            <div class="data-table">
                <div class="data-table-header">
                    <h2>Name - 000111222</h2>
                </div>
                <div class="data-table-content">
                    <table class="table-striped">
                        <tbody>
                            <tr>
                                <td>001</td>
                                <td>Test, Test</td>
                                <td>Import Complete</td>
                                <td>10/24/2013 7:27:42</td>
                            </tr>
                            <tr>
                                <td colspan="4" class="pagination">
                                    <div class="page-size">
                                        Page Size:
                                        <select chosen disable-search="true" id="page-size">
                                            <option>10 items</option>
                                            <option>25 items</option>
                                            <option>50 items</option>
                                            <option>100 items</option>
                                        </select>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

我尝试将所有自定义css评论为下拉列表的样式，并且在此问题上没有任何变化。

非常感谢任何帮助

编辑：我使用firefox的3d视图来看一看它似乎不是一个z-index问题

Answer 1

尝试添加css属性z-index。

将div容器放在所有元素下

<style>
   .under{
      z-index:-200; //this put your div under other elements
   }
</style>

不要忘记将class="under"应用于您的div容器。

---

或者您可以将所有元素的下拉选项放在

上

<style>
   .over{
      z-index:200; //this put your dropdown options over other elements
   }
</style>

不要忘记将class="over"应用于您的下拉选项。