CSS z-index 在角度动画中无法正常工作答案

【问题标题】：CSS z-index not working as expected with angular animationCSS z-index 在角度动画中无法正常工作
【发布时间】：2014-02-11 14:57:05
【问题描述】：

我正在尝试在我的应用程序中实现拖放，并希望使用添加项目时将消失的文本来识别拖放区。为了美观，我想在添加项目时在动画中使用 animate.css 的反弹，并根据需要淡入淡出文本，但是我似乎无法安排它，因此背景文本不会干扰添加/删除元素的位置。

关于如何解决此类问题的任何想法？我找不到尊重 z-index 的方法。我唯一的想法是将文本设置为拖放区的背景图像，但感觉必须有更好的方法。

【问题讨论】：

【解决方案1】：

终于有人用 AngularJS 进行拖放了。 :)

你可以在github上做，完成后与我们分享吗？

回复您的问题，外position:relative，内position:absolute。

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

我认为，要使其成为指令，某些 css 必须由指令强制执行。

【讨论】：

这太棒了！非常感谢你的帮助。另外，拖放不是我写的，你可以在github here上找到它。您必须删除第 33-37 行才能使其在 angular 1.2 中工作。

【解决方案2】：

从您的 Plunk 中，背景文本看起来不是绝对定位的。所以被丢弃的元素将在容器中跟随它流动。

您可能应该在放置时立即隐藏背景文本。 drop 是 Javascript dnd event。

【讨论】：