Javascript 即使设置为“自动”，如何确定元素的z索引

全部：

我对CSS还很陌生。我尝试实现的一个数据可视化用户案例（我使用D3.js）是：

假设有几个div相互重叠，单击的一个将显示在顶层，我想知道当所有div z-index都是“自动”时如何设置其z-index？（由于某些原因，例如数据绑定，我无法调整其在DOM树中的位置）

我遇到的主要困难是： 如何确定这些div的起始最小z索引（因为还有一些其他元素，即使我可以为单击的div指定更高的z索引，而为所有其他div指定更低的z索引，但该数字仍然可能小于其他元素）因此，如果我可以获得该z索引，我不需要知道它是什么，但只要我可以增加它，以确保点击的一个有更高的数字，然后它就完成了

还是有其他方法可以做到这一点

var container = d3.select("body")
                    .append("div")
                    .classed("random", true)
                    .style("position", "fixed")
                    .style({
                        "top":"50px",
                        "width":"200px", 
                        "height":"200px", 
                        "background-color":"rgba(100,100,100, 0.5)"
                    })

var color = d3.scale.category20(); 
container.selectAll("span")
            .data([1,2,3,4])
            .enter()
            .append("span")
            .style({
                "position":"absolute",
                "width":"50px", 
                "height":"50px"
            })
            .style("margin", function(d,i){
                return i*10+10+"px";
            })
            .style("background-color", function(d, i){
                return color(i);
            })
            .text(function(d, i){
                return d;
            })
container.selectAll("span")
        .on("click", function(d, i){ 
            var block = d3.select(this); 


            // this is the part I can not figure out ================
            block.moveToFront();    


        });

---

您不使用SVG，可以对单击的元素应用

z-index

样式

示例如下：

UPD:

---

将您的示例更改为SVG格式，并通过单击“

可能重复@sglazkov”使其位于顶部谢谢，这篇文章是我提问的原因之一，我需要避免更改DOM树中元素的顺序。很抱歉，我为YouTunks制作了一个演示，但您如何确定topZindex比其他元素大，假设有一个跨度或某个东西已经有了更大的z指数（比如100或更多），感谢MDN，它说：“use元素从SVG文档中获取节点，并将它们复制到其他地方。其效果与将节点深度克隆到未公开的DOM中，然后粘贴到use元素所在的位置相同，这与HTML5中克隆的模板元素非常相似。“因此，基本上它会向DOM中添加另一个元素（这类似于更改DOM中的原始位置），而我无法调整div（或更新版本中的RECT）