用CSS实现div中居中放置提示文字，且可被覆盖

1.背景：如下图所示：左侧区域是三个可拖拽div,右侧是可拖拽区域，目标就是在可拖拽区域居中放一行提示文字，即：Drop to Here,且有元素拖入（左侧可拖拽元素落入右侧区域时，变为带有一个名称标签+输入框的div）时，可被覆盖；

2.解决方法：将提示文字设置为绝对定位，且设置z-index，其应小于落入元素的层次值，同时提示文字dropTips（类名），应相对于父元素dropArea（类名），因此需要增加样式如下：

.dropArea {
     
  position: relative;
  ...
}
.dropTip {
     
  position: absolute;
  left: 50%;
  top: 50%;
  tranform: translate(-50%, -50%);
  z-index: 100;
}
.dropItem {
     
  z-index: 200;//(若无效，增设一下position)
  ...
}

3.总结：能力有限，目前的话就想到这一个实现方法，不知各位大佬们是否有更好的实现方式呢？欢迎指点一二呀！！！谢谢！