javascript - Material design lite 和 Drift 之间的 CSS 冲突

Question

我想在使用 Material Design Lite ( https://github.com/imgix/drift ) 的 Web 应用程序中使用 Drift.js ( https://getmdl.io/ ) 的缩放功能，但我无法让它工作。我能够将它缩小到一个 css 问题，但我有点被困在这里。

这里有 2 个 fiddle ，唯一的技术区别是在第二个 fiddle 中，没有 Material Design 精简版 CSS。

第一把 fiddle :https://jsfiddle.net/mbitard/b41g2f0y/

new Drift(document.querySelector('img'), {
        paneContainer: document.querySelector('p'),
        inlinePane: true,
        inlineOffsetY: 0,
        containInline: true
});

第二把 fiddle :https://jsfiddle.net/qankkgLe/2/

第一个 fiddle 的缩放不起作用。

Answer 1

看来 <main>元素的 z-index 大于缩放。

通过添加 z-index: 100;至 .drift-zoom-pane.drift-inline { css 类我可以再次缩放。