javascript - 即使将元素设置为自动，如何确定元素的 z-index

Question

全部:

我是 CSS 的新手。我尝试实现的一个数据可视化用户案例(我使用 D3.js)是:

假设有几个DIV相互重叠，点击的那个会显示在顶层，我想知道当所有DIV的z-index都是“自动”时如何设置它的z-index？(出于某些原因，例如数据绑定(bind), 我不能调整它在 DOM 树中的位置)?

我遇到的主要困难是: 如何确定这些 DIV 的起始最小 z-index(因为还有一些其他元素，即使我可以为点击的那个提供更高的 z-index 而为所有其他 DIV 提供更低的 z-index，但数字仍然可能是小于其他元素) 所以，如果我能得到那个 z-index，我不需要知道它是什么，但只要我能增加它以确保被点击的那个有比那个更高的数字，然后就完成了。

或者还有其他方法吗？

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();    


        });

Answer 1

您不使用 SVG，可以将 z-index 样式应用于点击的元素

此处示例:https://jsfiddle.net/serGlazkov/z3gykfc1/

更新:

将您的示例更改为 SVG 格式并点击顶部位置 https://jsfiddle.net/serGlazkov/z3gykfc1/3/