Material Design lite 和 Drift 之间的 CSS 冲突答案

【问题标题】：CSS Conflict between material design lite and DriftMaterial Design lite 和 Drift 之间的 CSS 冲突
【发布时间】：2016-06-09 13:24:06
【问题描述】：

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

这里有 2 个小提琴，唯一的技术区别是在第二个中，没有 material design lite 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/

第一个小提琴的缩放不起作用。

【问题讨论】：

标签： javascript css material-design-lite

【解决方案1】：

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

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

【讨论】：