jQuery插件与转换冲突：translateY

Question

我正在使用轻量级jQuery插件leanModal

该插件的代码包含在此jsfiddle中： https ://jsfiddle.net/meqtu354/2/

例如，在jsfiddle中，所有插件所做的就是，当您单击click to show popup ，弹出的窗口就会显示出来，而其余文档将被一个巨大的深色透明div覆盖。

但是由于某些原因，当我添加： transform: translateY到我的CSS

https://jsfiddle.net/meqtu354/3/ （检查CSS，添加了两个选择器）

现在，当您单击click to show popup ，覆盖层（深色透明div）也将覆盖弹出窗口。

我现在已经阅读了半个小时，但仍然不知道为什么

Answer 1

您需要将弹出div放在st-scroll类之外：

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

<div class="st-scroll">

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

</div>

我在您的小提琴中尝试了一下，效果很好。 当您应用3d变换属性时，我认为它会合并div，就好像它是一个没有图层的对象一样。

Answer 2

您正在使用相邻的选择器，但没有选择＃st-control-1和.st-scroll之间的<a href=""> 。 一些如何打破CSS的流程。 正确的相邻选择器路径是：

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

另外，对于这些类型的属性，请在CSS中使用供应商前缀。 希望这可以帮助。