CSS z-index不像預期的那樣與角動畫一起工作

我試圖在應用程序中實施拖放操作，並希望識別添加項目時將消失的文本拖放區域。爲了美觀，我想在添加項目時使用animate.css在動畫中反彈，並根據需要淡入淡出文本，但似乎無法排列它，因此背景文本不會干擾添加/刪除的元素的位置。CSS z-index不像預期的那樣與角動畫一起工作

This plunk illustrates the issue

就如何解決這類問題的任何想法？我無法找到一個尊重z-index的方法。我唯一的想法是將文本設置爲放置區的背景圖像，但感覺必須有更好的方法。

來源

2014-02-11 bornytm

最後有人用AngularJS進行拖放操作。 :)

你可以在github中完成並在完成後與我們分享它嗎？

要回答你的問題，請在position:relative之外，position:absolute。

.well { 
    position: relative; 
    min-height: 50px; 
} 
.background { 
    position: absolute; 
    top: 0; 
    left: 10; 
    margin-top: 15px; 
}

爲了使它成爲一個指令，我認爲一些CSS必須被指令強制。

http://plnkr.co/edit/OAJuNXxYs05W1QYN0VOU?p=preview

來源

2014-02-11 17:32:26 allenhwkim

這太棒了！非常感謝你的幫助。另外，我沒有寫拖放，你可以在[github here]找到它（https://github.com/ganarajpr/angular-dragdrop）。您必須刪除第33-37行才能使其工作在角度1.2。 – bornytm

從您的Plunk中，它看起來像背景文字沒有絕對定位。所以被丟棄的元素會在容器中流動。

您應該立即隱藏背景文本。 drop是Javascript dnd event。

來源

2014-02-11 15:42:10

我相信這個解決方案適用於進入下跌區域元素，但不能離開一個拖放區域元素，因爲有數組中沒有元素（彈跳動畫面前文本變得儘快再次可見完成）。 – bornytm

CSS z-index不像預期的那樣與角動畫一起工作

回答

相關問題