CSS在Material Design Lite和Drift之间的冲突

Question

I want to use the zoom capacity of Drift.js ( https://github.com/imgix/drift ) inside a webapp using material design lite ( https://getmdl.io/ ) and I can't get it to work. I was able to narrow it down to a css issue, but I'm kind of stuck here.

Here are 2 fiddles, the only technical difference is that in the second one, the material design lite css is absent.

The first fiddle: https://jsfiddle.net/mbitard/b41g2f0y/

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

The second fiddle: https://jsfiddle.net/qankkgLe/2/

The zoom on the first fiddle doesn't work.

Answer 1

It appears that the <main> element has a greater z-index than the zoom.

By adding z-index: 100; to .drift-zoom-pane.drift-inline { css class I can zoom again.