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中使用供應商前綴。 希望這可以幫助。