Highcharts 3.0 - Renderer is covering the export button

I just upgraded an application to Highcharts 3.0, and it looks like the new export button is now covered by objects drawn using the chart renderer. This wasn't the case under 2.3.3.

Please see http://jsfiddle.net/YcJ6U/1/

Here's the code to produce the plot:

$(function () { $('#container').highcharts({

    chart: {
        events: {
            load: function(event) {
                drawBox(this);
            }
        }
    },
    credits: {
        enabled: false
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }],

    exporting: {
        buttons: {
            contextButton: {
                symbol: 'circle',
                symbolStrokeWidth: 1,
                symbolFill: '#bada55',
                symbolStroke: '#330033',
                align: 'left'
            }
        }
    }

}, function(chart) {
    //drawBox(chart)
});

function drawBox(chart) {
    chart.renderer.rect(25, 0, 100, 100, 5)
        .attr({
            'stroke-width': 2,
            stroke: 'red',
            fill: 'yellow'               
        }).add();        
}

}); Can anyone provide a solution to this?

Not sure when this changed but Highcharts is rendering both the button and the rect using SVG. Element stacking order is based on the order they were drawn. By drawing the rect onload, you are drawing it after the button. I believe the only way to fix this would be after the chart is drawn to bring the button back to the top:

chart.exportSVGElements[0].toFront()

Or go back to how it was in the initial link without the zIndex :)

Updated fiddle here.