Javascript jquery插件与transform:translateY冲突

我使用一个轻量级jQuery插件调用leanmodel

该插件的代码包含在这个JSFIDLE中：

例如，在JSFIDLE中，当您单击

单击以显示弹出窗口时，弹出窗口将显示，文档的其余部分将被一个巨大的黑色透明div覆盖

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

（检查css，添加两个选择器）

现在，当您单击
单击以显示弹出窗口
时，覆盖层（暗透明div）也会覆盖弹出窗口

我已经读了半个小时了，但仍然不明白为什么需要将弹出div放在st scroll类之外：

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

<div class="st-scroll">

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

</div>

弹出窗口

我在你的小提琴上试过了，效果很好。当您应用3d transform属性时，我认为它会合并div，就像它是一个没有图层的对象一样。
您使用的是相邻的选择器，但没有选择在#st-control-1和.st滚动之间的
。这是如何打破CSS的流程的。正确的相邻选择器路径为：

#st-control-1:选中~#st-panel-1.st滚动{
转化：translateY（0%）；
-ms转换：翻译（0%）；
-网络工具包转换：翻译（0%）；
}

此外，在css中为这些类型的属性使用供应商预修复。希望这有帮助
 问题是这是一个超级简化的版本。我真的需要弹出窗口在里面。原因无论何时选择单选按钮，它都会通过向上或向下按页面切换到相关页面。弹出窗口位于其中一个pagesOk中，因此javascript将覆盖添加到body标记。它是否应该单独附加到每个节标记？由于transform属性合并了包含弹出窗口的部分，因此它必须是该部分的一部分。天啊，我还没说完。。。更改<代码>$（“正文”）。追加（覆盖）至
$（“#st-panel-1”）。追加（覆盖）。不确定这是否是你想要的。嘿，谢谢，这在我的实际代码中不太管用。也许如果我能理解这个问题，我可以更好地解决它，因为我知道原始代码（因为它太长了，无法在这里发布）。那么，为什么添加translateY会改变任何事情呢。据我所知，我只是把一切都改变了。插件添加了一个覆盖所有页面的巨大覆盖层，但是弹出窗口应该仍然位于覆盖层的顶部。不是吗？但是一旦你应用了转换属性，你的div和里面的所有东西就变成了一个对象。因此，不能将对象的一部分放在覆盖层下方，另一部分放在覆盖层上方。您可以将弹出窗口移到st scroll div之外，只需彼此独立地控制页面和弹出窗口。我不想说这是不可能的，也许有办法，但我没有看到。还有别的办法吗？因为实际的代码是这样工作的：有多个“页面”，每个页面都有100%的高度，都在
st scroll
下，但是在不同的位置。每当单击单选按钮时，使用translateY向上移动st scroll，这就是为什么我不能包括#st-panel-1。该弹出窗口仅位于page1/#st-panel-1中。有什么想法吗？谢谢