单击Highchart图例后，它会改变嵌套图例

Question

我正在尝试使用嵌套图例制作嵌套饼图，如下所示：

我的传奇JSON如下：

legend: {
            y:['open','overdue'].indexOf(this.name.trim().toLowerCase())!=-1?115:10,
            labelFormatter: function() {
                var lowrNm=this.name.trim().toLowerCase();
                legndStat+=1;//legndStat is set global initialized from 0 
                var isPrnt=['open','overdue'].indexOf(lowrNm)!=-1;
                var cMrgn=lowrNm=='overdue'?-16:lowrNm=='current'?(legndStat==3?-80:-25):lowrNm=='projected'?(legndStat==4?-70:-15):0;
                return '<div class="cLgnd '+(isPrnt?'prnt':'prntSb')+' cm-t-'+cMrgn+'"><span style="background: '+this.color+';height: 4px;width: 4px;position: absolute;padding: 8px;left: '+(isPrnt?-20:-20)+'px;margin-top: -2px;"></span>'+ this.name + '</div>';
            },
            align: 'left',
            useHTML: true,
            verticalAlign: 'middle',
            layout: 'vertical',
            itemMarginTop: 5,
            itemMarginBottom: 5,
            itemMarginRight:30
        },

我的CSS如下：

#demandData .highcharts-legend rect{
    fill: #fff!important;
}
#demandData .highcharts-legend>div{
    left: 5px!important;
    top: 33px!important;
}
.cLgnd{
    text-align: left!important;
    display: block!important;
    top: 0!important;
    left: -12px!important;
    position: absolute!important
}
.prnt{
    margin-left:0!important;
    margin-top: -80px!important;
}
.prntSb{
    margin-left:20px!important;
}
.cm-t--16{
    margin-top:-16px!important;
}
.cm-t--80{
    margin-top:-80px!important;
}
.cm-t--25{
    margin-top:-25px!important;
}
.cm-t--70{
    margin-top:-70px!important;
}
.cm-t--15{
    margin-top:-15px!important;
}

但点击任何传说之后它的位置会改变如下：

但是在检查了附近所有元素 cLgnd （4级到父级及其所有孩子）之后，我才知道没有css被更改，它的布局变了改变（怪人）