jquery - IOS html css Z-Index 和位置绝对不适用于重叠的 DIV

Question

我需要 div“ slider ”覆盖除 z-index 和 position:relative 或 absolutes 或 fixed 之外的所有其他内容的顶部。我确定我做错了什么，因为它在我制作的较小的演示应用程序中运行良好。似乎在 Icenium 中工作正常但不是真正的 ipad

 <div id="tabstrip-home" data-role="view"  data-title="Home"   style="z-index:1; position:relative">
    <div id="slider" class="slide" data-show="showDrawer" style="height:1000px; align:right; border:solid 1px black; background-color:red">

                    <div id="my-drawer" style="width: 270px; border:2px; background-color:red; ">
                        <div data-role="navbar">
                            Menu
                        </div>
                        <ul data-role="listview" data-type="group" style="position:relative; background-color:red">
                            <li >
                                <ul>
                                    <li>
                                        <a>Customers</a>
                                    </li>
                                    <li>
                                        <a>Products</a>
                                    </li>
                                    <li>
                                        <a>New Order</a>
                                    </li>
                                    <li>
                                        <a>Manage Orders</a>
                                    </li>
                                    <li>
                                        <a>Synchronization</a>
                                    </li>
                                    <li>
                                        <a>Settings</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>

<a id="drawerButtonId" data-role="button" class="drawerBtn" data-align="right" style="position:relative;">Drawer</a>
</div>

CSS:

<style>
            .slide
            {
                direction: right;
                position: fixed; 
                z-index: 903; 
                background: red;
                display: none;
                /*                -webkit-transition: width 1s ease;*/
                overflow: hidden;
            }

            .drawerBtn
            {
                cursor: pointer;
            }
        </style>

Answer 1

父 div 的 z-index 为 1。子 div 将受其约束。子 div 的 z-index 只会影响父上下文中的其他子元素。