Javascript 使用z索引属性在单个拖放元素中堆叠多个文本元素

我有12个参数，我试图在一个拖放元素上不按特定顺序堆叠。最终用户应该能够将这些文本拖放到匹配的元素中。问题是重叠的文本似乎彼此扭曲，因此从堆栈中拖动的各种标题不再清晰可见。有人知道如何使用z-index属性堆叠文本吗？我附上了一张图片

这是我的密码

#论点1，
#论据2，
#论证3，
#论据4，
#论点5，
#论点6，
#论点7，
#论点8，
#论点9，
#论据10，
#论据11，
#论据12{
位置：绝对位置；
左边距：500px；
宽度：280px；
高度：60px；
}
#论据1{
z指数：12；
}
#论据2{
z指数：11；
}
/*继续，直到定义了所有12个id为止*/

第一个参数
第二个论点
十二个论点中的第三个

正如您使用的

位置：绝对对所有参数都是必需的，这就是为什么它们之间是重叠的。您应该通过定义来修复所有参数的位置


#论点1，
#论据2，
#论证3，
#论据4，
#论点5，
#论点6，
#论点7，
#论点8，
#论点9，
#论据10，
#论据11，
#论据12{
位置：绝对位置；
左边距：500px；
宽度：280px；
高度：60px；
}
#论据1{
z指数：12；
}
#论据2{
z指数：11；
顶部：24px；
}
#论点3{
顶部：43px；
}

第一个参数
第二个论点
十二个论点中的第三个
可能不是您想要的，而是信息和简短的CSS声明


如果使用自然堆叠上下文（将最后一个放置在顶部），则可以重新设置
z-index
属性


如果使用
网格
并将其堆叠在同一网格单元中，也可以避免
定位
：



例如，使用背景色，这样您可以一个接一个地拾取它们


var；
/*对可拖动目标激发的事件*/
document.addEventListener（“拖动”），函数（事件）{
}，假）；
document.addEventListener（“dragstart”，函数（事件）{
//在拖动的元素上存储一个参考
拖动=event.target；
//让它半透明
event.target.style.opacity=.5；
}，假）；
文件。添加事件列表器（“dragend”，函数（事件）{
//重置透明度
event.target.style.opacity=“”；
}，假）；
/*对投放目标发射的事件*/
文件。添加事件列表器（“dragover”，功能（事件）{
//防止默认值以允许删除
event.preventDefault（）；
}，假）；
文件.附录列表器（“绘图器”，功能（事件）{
//当可拖动元素进入时，突出显示潜在下降目标
if（event.target.className==“dropzone”）{
event.target.style.background=“紫色”；
}
}，假）；
文件。添加事件列表器（“dragleave”，函数（事件）{
//当可拖动元件离开时，重置潜在下降目标的背景
if（event.target.className==“dropzone”）{
event.target.style.background=“”；
}
}，假）；
document.addEventListener（“drop”），函数（事件）{
//防止默认操作（作为某些元素的链接打开）
event.preventDefault（）；
//将拖动的图元移动到选定的放置目标
if（event.target.className==“dropzone”）{
event.target.style.background=“”；
拖动的.parentNode.removeChild（已拖动）；
event.target.appendChild（拖动）；
}
}，假）
.b_{
宽度：280px；
高度：60px；
背景：白色；
边框：实心；
网格行：1；/*第一行*/
网格列：-1；/*如果列数未知，则为最后一个单元格*/
光标：指针；
}
安西克特先生{
显示：网格；
网格模板列：1fr自动；
论证内容：结束；
边界：双；
}
比斯先生{
网格模板列：自动；
/*重置为单个列*/
宽度：最大含量；
浮动：对；
/*？？有用吗*/
}

那个容器是用来装别的东西的吗，如果否，则从CSS中删除该文本和网格模板列规则；
十二个论点中的第四个
十二个论点中的第三个
第二个论点
第一个参数
Dropzone：
类似的方法从一个单独的单元开始，钩住并漂浮到右侧

十二个论点中的第四个
十二个论点中的第三个
第二个论点
第一个参数
您应该从Arguments中删除该位置并给它们一个背景色，这样顶部的位置将清晰可读，我猜…@mehedihasansam会从堆栈中删除元素，因此不符合预期目的。从Javascript结尾。我有4个不同的“DropZone”，需要与相应的参数匹配。每个“dropzone”至少有3个右参数。并且需要有一个分类警报，告诉用户它们已正确匹配。@S.Okumu您是否可以共享您的html/dropzone，看看可以做些什么来过滤它们以匹配可拖动的项目？一个类名可能会完成这项工作。我将它作为编辑共享。我不知道这个社区是否允许这样做，但请看一看。请注意，“dropzone”类名仅在img标记内声明时有效。在您能够看到我的Html之前，这似乎需要一些时间。请查看我提出的新问题的链接。