iscroll 的 transform 属性导致 fixed 和 z-index 效果与预期不符，影响 dialog 遮罩层

Question

问题：因为项目需求引用了 iscoll，结果发现 dialog 被遮罩层覆盖，无法正常使用 (见 demo)

现状：google 之，发现是 transform 对 z-index 和 position: fixed 产生了影响，实验显示在去掉 iscoll 带来的 transform 属性后即可恢复正常。但继续查要怎么取消这个影响，只查到说不适用 transform 属性即可...TAT

期望：有没有大佬能给个在满足以下三点的情况下的解决方法：

1. 页面结构（head，sider，content 三块）不变，样式可改

2. sider 和 content 有 iscroll 的需求，所以这两块一定会有 transform 属性

3. 遮罩层效果要能覆盖整个页面（只覆盖 content 的效果我能成功做出来但与预期不符）

基础结构写了个 demo 在 这里

补充：

• demo 中，开关 .iscroll 的 transform 属性即可看到它的影响。

• demo 中，如果在 dialog-area 一层创建 mask 层，那么在 content 内部是正常的，可是不能满足 期望3（因为 transform 影响了 position: fixed 的表现），如果有办法从这个角度解决，也是可以的

• 这个项目是基于 vue 组件化开发的，同时引入了 element-ui，所以 dialog 没法被直接创建在 body 上~（el-dialog 的形式，尽量不去直接操作 DOM）

Answer 1

你都把mask放在外层了，为啥不把dialog放在外面，dialog一般都放外面的，iscoll里面都是滚动的内容

Answer 2

谢邀。

看标题有 transform 和 z-index 这两个词，我想这个页面的内容你或许可以看一下。

https://developer.mozilla.org...