How to bring foreignObject elements in SVG to the top layer?

Question

I have a customized version of D3 based family tree. The only difference is, instead of using rect nodes I chose to use foreignObject.

I would like the foreignObjects to be on the top of other path layer so that they do not overlap, but as you see from the sample code linked below, we still see the path lines above the html elements. Based on the google search, things I tried were changing document order, select("selector").raise(), setting z-index, and block inline notation on css, but nothing changes at all. Could anyone help with this.

sample code

nodes.append("foreignObject")
    .attr("display", function(d) {
        if (d.hidden) {
            return "none";
        } else {
            return "";
        }
    })
    .attr("width", 50)
    .attr("height", 100)
    .attr("x", kx)
    .attr("y", ky)
    .append("xhtml:div")
    .attr("class", "node")
    .append("text")
    .text(function(d) {
        return d.name;
    })
    .attr("id", function(d) {
        return d.id;
    });

Answer 1

The problem here has nothing to do with z-indices or elements' order. The issue is that you're not filling the <div>s: you're using fill in the CSS, but the correct way to fill the <div> is using background-colour or background:

.node {
    background: white;
}

Here is your JSFiddle with that change: http://jsfiddle.net/jsoLg0n3/