Question

我在项目中使用Material UI Drawer组件。

我遇到了iPad的特定问题，据我所知，这导致了两个问题： - 叠加未出现在导航栏和正文内容之上 - 抽屉没有出现在叠加层顶部

据我所知，这似乎与z指数有关;可能与使用“transform：translateZ（0px）;”

有关

这是叠加层的渲染html：

<div style="position: fixed; height: 100%; width: 100%; top: 0px; left: 
0px; opacity: 1; background-color: rgba(0, 0, 0, 0.541176); -webkit-
tap-highlight-color: rgba(0, 0, 0, 0); will-change: opacity; transform: 
translateZ(0px); transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 
0ms, opacity 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; z-index: 1200; 
pointer-events: auto;"><!-- react-empty: 149 --></div>

以下是抽屉的主要div渲染html：

<div style="color: rgb(255, 255, 255); background-color: rgb(0, 0, 0); 
transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; box-
sizing: border-box; font-family: Roboto, sans-serif; -webkit-tap-
highlight-color: rgba(0, 0, 0, 0); box-shadow: rgba(0, 0, 0, 0.156863) 
0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px; border-top-left-
radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 
0px; border-bottom-left-radius: 0px; height: 736px; width: 200px; 
position: absolute; z-index: 1300; left: -207px; top: 0px; overflow: 
auto; -webkit-overflow-scrolling: touch; margin-left: 50%;">

从上面可以看出，叠加层的z-index为1200，抽屉为1300，导航元素的z-index为1030.

抽屉在Mac上的Chrome和Safari中完美无缺。

Answer 1

这听起来与以下问题类似。

webkit-transform breaks z-index on Safari

css z-index lost after webkit transform translate3d

最常见的答案是向父级添加3d变换。（在这种情况下，叠加层和抽屉的公共父元素）

我通过添加以下内容解决了类似的问题。

-webkit-transform: translate3d(0px, 0px, 0px)

除此之外，以上页面还发布了许多解决方案。

希望有帮助。

Answer 2

position: fixed与z-index of 1200可以轻松胜过position: absolute中的z-index: 1300 ，如果绝对位置div是z索引较低的另一个位置父级的后代大于1200

这些z索引不可比，因为一个是固定的，一个是绝对的。固定元素的最接近的父元素始终是窗口，而绝对元素的最接近的父元素可以是任何东西，因此（很可能）它们不在同一堆叠上下文中。

您确实需要显示其余代码。

iOS上的Z-Index问题使用Material UI Drawer组件

2 个答案: