使用CSS定位SVG元素。有一些问题

Question

我在使用D3.js制作的趋势图中添加了20个SVG方块。 Ech square是一个可点击的对象，可以在图形上打开和关闭线条。在Firefox中，方块显示在右边的花边中，在Chrome中，CSS显然完全停止工作，方块只是放到页面底部。

这是图表http://www.andkensol.com/dataviz/TrendGraph/trendMov.html

的链接

以下是我过去制作的一些JavaScript和CSS，然后定位正方形。使用position：relative可能是原因。有人会有任何意见或建议吗？

    //JS
    //AVENGERS CONTROLS 
    d3.select(".chart").append("svg")
        .attr("class", "AvengeDot")
     .on("mouseover", function(d) {
        nameInfo.transition()
            .duration(100)
            .style("opacity", .9);
        nameInfo.html("Marvel's The Avengers")
            .style("left", (d3.event.pageX + 10) + "px")
            .style("top", (d3.event.pageY - 30) + "px");
        })
     .on("mouseout", function(d) {
        nameInfo.transition()
            .duration(200)
            .style("opacity", 0);
        })


    //HUNGER GAMES CONTROLS 
    d3.select(".chart").append("svg")
        .attr("class", "HungerDot")
     .on("mouseover", function(d) {
        nameInfo.transition()
            .duration(100)
            .style("opacity", .9);
        nameInfo.html("Hunger Games")
            .style("left", (d3.event.pageX + 10) + "px")
            .style("top", (d3.event.pageY - 30) + "px");
        })
     .on("mouseout", function(d) {
        nameInfo.transition()
            .duration(200)
            .style("opacity", 0);
        })


           //CSS
            .AvengeDot{
            position:relative;
            left:77%;
            bottom:118%;
            width:15px;
            height:15px;
            background-color:#FF9604;
            cursor:pointer;
        }

            .HungerDot{
            position:relative;
            left:75.5%;
            bottom:114%;
            width:15px;
            height:15px;
            background-color:#FF9F18;
            cursor:pointer;
        }