材料设计精简与漂移之间的CSS冲突

Question

我想使用材质设计精简版（https://github.com/imgix/drift）在webapp中使用Drift.js（https://getmdl.io/）的缩放容量，但我无法使其工作。我能够把它缩小到css问题，但我有点卡在这里。

这里有2个小提琴，唯一的技术差异在于，在第二个中，材料设计精简版css不存在。

第一小提琴：https://jsfiddle.net/mbitard/b41g2f0y/

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

第二小提琴：https://jsfiddle.net/qankkgLe/2/

放大第一个小提琴并不起作用。

Answer 1

似乎<main>元素的z-index比缩放更大。

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