Javascript 不可拾取的分层元素，Z索引不工作

完成一个照片标签实践小部件，我所剩下的就是一个小问题，无法选择用于关闭以前制作的标签的“x”框。我确保关闭它们的代码已经工作了，但是由于我使用的是跟随光标的分层div，所以我可能从来没有真正单击过它。我已经确定它也有一个更高的z索引值，但这似乎仍然不会影响这个问题

编辑：刚刚还发现了另一个小问题，每当标记框变成绿色标记框时，它会下降大约5个像素。是否可以简单地偏移CSS高度，或者您必须为其提供所有新参数

$（document）.bind（'mousemove'，函数（e）{
$（'.tagger'）.css({
左：e.pageX-55，
顶部：e.pageY-55
});
});
$（“#群组”）。单击（函数（）{
$（'.tagging'）.attr（'class'，'tagger'）；
});
$（“#群组”）.mouseleave（函数（）{
$（'.tagging'）.attr（'class'，'tagger'）；
});
$（文档）.on（'click'，'.tagger'，函数（e）{
$（'.tagger'）.attr（'class'，'tagging'）；
});
$（文档）。在（'单击'，'上。标记li'，函数（e）{
$（'.tagging.name'）.text（$（event.target.text（））；
$（'.tagging.xBox'）.removeClass（'hidden'）；
$（'.tagging'）.attr（'class'，'tagging'）；
$（“.container”）.append（“x
一个
两个
三个
叉子
五个
”；
});
$（文档）.on（'click'，'.xBox'，函数（e）{
$（e.target）.parent（）.remove（）；
});
.tagger{
顶部：0px；
左：0px；
位置：绝对位置；
z指数：3；
}
.tagger.框架{
位置：相对位置；
高度：100px；
宽度：100px；
填充：0px；
边界：5px；
边框样式：实心；
边框颜色：红色；
}
.tagger.姓名{
显示：无；
位置：相对位置；
顶部：-5px；
高度：90px；
宽度：90px；
填充物：5px；
边界：5px；
边框样式：实心；
边框颜色：红色；
背景色：白色；
}
.tagger.name ul{
列表样式：无；
填充：0px；
边际：0px；
显示：内联块；
}
.标记{
位置：绝对位置；
z指数：3；
}
.标签.框架{
位置：相对位置；
高度：100px；
宽度：100px；
填充：0px；
边界：5px；
边框样式：实心；
边框颜色：红色；
}
.标记.名称{
位置：相对位置；
顶部：-5px；
高度：90px；
宽度：90px；
填充物：5px；
边界：5px；
边框样式：实心；
边框颜色：红色；
背景色：白色；
}
.标签.名称ul{
列表样式：无；
填充：0px；
边际：0px；
显示：内联块；
}
.标记{
位置：绝对位置；
z指数：2；
}
.xBox{
z指数：5；
位置：相对位置；
顶部：15px；
左：计算（100%-15px）；
边界半径：50%；
位置：相对位置；
高度：20px；
宽度：20px；
填充：0px；
背景颜色：绿色；
文本对齐：居中；
}
.xBox span{
显示：内联块；
}
.带标签的.框架{
位置：相对位置；
高度：100px；
宽度：100px；
填充：0px；
边界：5px；
边框样式：实心；
边框颜色：绿色；
}
.标记.名称{
位置：相对位置；
顶部：-5px；
高度：15px；
宽度：100px；
填充：0px；
边界：5px；
边框样式：实心；
边框颜色：绿色；
背景颜色：绿色；
显示：内联块；
}
.隐藏{
显示：无；
}
.集装箱{
溢出：隐藏；
位置：相对位置；
显示：内联块；
}

x

一个
两个
三
叉子
Fyve

实际上z-index正在工作。它正在和它的母公司合作。通过应用
z-index
，您不能期望
xBox
elem出现在
tagger
elem的前面，因为它与其父项一起工作

在下面的代码中，我对
标记的
类做了一些更改。我将其
z-index
更改为更大的值，以便它出现在
tagger
元素前面


$（document）.bind（'mousemove'，函数（e）{
$（'.tagger'）.css({
左：e.pageX-55，
顶部：e.pageY-55
});
});
$（“#群组”）。单击（函数（）{
$（'.tagging'）.attr（'class'，'tagger'）；
});
$（“#群组”）.mouseleave（函数（）{
$（'.tagging'）.attr（'class'，'tagger'）；
});
$（文档）.on（'click'，'.tagger'，函数（e）{
$（'.tagger'）.attr（'class'，'tagging'）；
});
$（文档）。在（'单击'，'上。标记li'，函数（e）{
$（'.tagging.name'）.text（$（event.target.text（））；
$（'.tagging.xBox'）.removeClass（'hidden'）；
$（'.tagging'）.attr（'class'，'tagging'）；
$（“.container”）.append（“x
一个
两个
三个
叉子
五个
”；
});
$（文档）.on（'click'，'.xBox'，函数（e）{
$（e.target）.parent（）.remove（）；
});
.tagger{
顶部：0px；
左：0px；
位置：绝对位置；
z指数：3；
}
.tagger.框架{
位置：相对位置；
高度：100px；
宽度：100px；
填充：0px；
边界：5px；
边框样式：实心；
边框颜色：红色；
}
.tagger.姓名{
显示：无；
位置：相对位置；
顶部：-5px；
高度：90px；
宽度：90px；
填充物：5px；
边界：5px；
边框样式：实心；
边框颜色：红色；
背景色：白色；
}
.tagger.name ul{
列表样式：无；
填充：0px；
边际：0px；
显示：内联块；
}
.标记{
位置：绝对位置；
z指数：3；
}
.标签.框架{
位置：相对位置；
高度：100px；
宽度：100px；
填充：0px；
边界：5px；
边框样式：实心；
边框颜色：红色；
}
.标记.名称{
位置：相对位置；
顶部：-5px；
高度：90px；
宽度：90px；
填充物：5px；
边界：5px；
边框样式：实心；
边框颜色：红色；
背景色：白色；
}
.标签.名称ul{
列表样式：无；
填充：0px；
边际：0px；
显示：内联块；
}
.标记{
位置：绝对位置；
z指数：5；
光标：指针；
}
.xBox{
z指数：5；
位置：相对位置；
顶部：15px；
左：计算（100%-15px）；
边界半径：50%；
位置：相对位置；
高度：20px；
宽度：20px；
填充：0px；
背景颜色：绿色；
文本对齐：居中；
}
.xBox s