Javascript 如何使用z索引显示元素

我创建了一个简单的div和svg

#第一元素{
背景色：红色；
位置：绝对位置；
宽度：100px；
高度：80px；
左：55px；
顶部：20px；
z指数：-1；
}
svg{
宽度：100%；
身高：100%；
笔画：黑色；
笔画宽度：2px；
指针事件：全部；
}

---

解决方案：移除

内的

标签

问题：问题在于您的

在

周围应用了一个矩形（

），该矩形具有

height=“100”

width=“200”

和

fill=“white”

。如果只需更改

opacity=“0”

，则

#firstElement

div在圆圈后面可见。我不知道你为什么一开始就把它包括进去

整个

标记是一个单独的单元，因此其中的元素具有相同的

z索引。不能使用
z-index
在
的元素之间插入
。为此，您必须将
元素一分为二


#第一元素{
背景色：红色；
位置：绝对位置；
宽度：100px；
高度：100px；
左：57px；
顶部：10px；
z指数：-1；
}
svg{
宽度：100%；
身高：100%；
笔画：黑色；
笔画宽度：2px；
指针事件：全部；
}
解决方案：移除
内的
标签

问题：问题在于您的
在
周围应用了一个矩形（
），该矩形具有
height=“100”
width=“200”
和
fill=“white”
。如果只需更改
opacity=“0”
，则
#firstElement
div在圆圈后面可见。我不知道你为什么一开始就把它包括进去

整个
标记是一个单独的单元，因此其中的元素具有相同的
z索引。不能使用
z-index
在
的元素之间插入
。为此，您必须将
元素一分为二


#第一元素{
背景色：红色；
位置：绝对位置；
宽度：100px；
高度：100px；
左：57px；
顶部：10px；
z指数：-1；
}
svg{
宽度：100%；
身高：100%；
笔画：黑色；
笔画宽度：2px；
指针事件：全部；
}
将图形放在不同的svg标记中，定位svg的绝对值，给它们z索引


#第一元素{
背景色：红色；
位置：绝对位置；
宽度：100px；
高度：80px；
左：55px；
顶部：20px；
z指数：1；
}
svg{
宽度：100%；
身高：100%；
笔画：黑色；
笔画宽度：2px；
位置：绝对位置；
指针事件：全部；
}
#svgRect{
z指数：0；
}
#SVG圈{
z指数：2；
}
将图形放在不同的svg标记中，定位svg的绝对值，给它们z索引


#第一元素{
背景色：红色；
位置：绝对位置；
宽度：100px；
高度：80px；
左：55px；
顶部：20px；
z指数：1；
}
svg{
宽度：100%；
身高：100%；
笔画：黑色；
笔画宽度：2px；
位置：绝对位置；
指针事件：全部；
}
#svgRect{
z指数：0；
}
#SVG圈{
z指数：2；
}
除了SVG代码之外，您不需要添加任何东西


除了SVG代码之外，您不需要添加任何东西


您可以使用
foreignObject
将
firstElement
移动到
svg


#第一元素{
背景色：红色；
宽度：100px；
高度：80px；
}
svg{
宽度：100%；
身高：100%；
笔画：黑色；
笔画宽度：2px；
指针事件：全部；
}
您可以使用
foreignObject
将
firstElement
移动到
svg


#第一元素{
背景色：红色；
宽度：100px；
高度：80px；
}
svg{
宽度：100%；
身高：100%；
笔画：黑色；
笔画宽度：2px；
指针事件：全部；
}

很抱歉，我无法准确理解您想要实现的目标，您能提供一张示例图片吗？设置“z-index:-1”将导致它的z-index低于所有其他元素，因此它将不可见。而且它已经完全定位。@SamuilPetrov我有updated@jai是的，但有可能改变吗？使用zindex或类似的东西？很抱歉，我不能确切地理解您想要实现的目标，您能提供一个示例图片吗？设置“z-index:-1”将导致它的z-index低于所有其他元素，因此它将不可见。而且它已经完全定位。@SamuilPetrov我有updated@jai是的，但有可能改变吗？使用zindex或类似的东西？如果rect颜色是粉红色，它是如何工作的？它应该显示为粉红色（矩形）-红色（div）-绿色（圆形），不改变不透明度correct@AkbarBasha为什么
rect
应该是粉红色的？？？@WasteD OP意味着减少
的
不透明度
会使其不可见，当OP通过更改不透明度将
fill
属性更改为其他颜色时，它就变得无用了，实际上，您正在删除矩形，这就像删除整个
标记一样。现在，这实际上满足了您的预期操作。您甚至没有提到一个粉红色的矩形。你能详细说明一下吗？整个
标记是一个单独的单元，因此其中的元素具有相同的
z索引。简而言之，您不能使用
z-index
在
的元素之间插入
。为此，您必须将
一分为二。请参见Zsolt的答案。如果矩形颜色为粉红色，它是如何工作的？它应该显示为粉红色（矩形）-红色（div）-绿色（圆形）常