jquery插件与transform的冲突: translateY

Question

我正在使用一个轻量级的jQuery插件调用leanModal

插件的代码包含在这个jsfiddle：https://jsfiddle.net/meqtu354/2/中。

插件所做的就是，例如在jsfiddle中，当你点击click to show popup时，弹出显示，文档的其余部分被一个巨大的黑色透明div覆盖。

但由于某种原因，当我在css中添加：transform: translateY时

https://jsfiddle.net/meqtu354/3/ (检查css，添加了两个选择器)

现在，当您单击click to show popup时，覆盖层(暗透明div)也会覆盖弹出窗口。

我已经读了半个小时了，但还是搞不懂为什么

Answer 1

您需要将弹出的div放在st-滚动类之外：

<div id="popup">POPUP</div>

<div class="st-scroll">

    <section></section>
    <script></script>
    <section></section>

</div>

我在你的小提琴里试过了，成功了。当您应用一个3d转换属性时，我认为它将div合并成一个没有层的对象。

Answer 2

您使用的是相邻的选择器，但不是在#st-control-1和.st-滚动之间选择<a href="">。有些人是如何破坏CSS流的。正确的相邻选择器路径是：

#st-control-1:checked ~ #st-panel-1 .st-scroll { transform: translateY(0%); -ms-transform: translate(0%); -webkit-transform: translate(0%); }

此外，对于这些类型的属性，请使用css中的供应商预修复。希望这能有所帮助。