highcharts - 異なる div でのハイチャートとレンダラーの重複

Question

html の 2 つの異なる div でハイチャートとレンダラーをオーバーラップさせたかったのですが、できませんでした。
div とチャート/レンダラーの z-index を試しましたが、うまくいきませんでした。
オーバーラップしたい順序で描画しようとしましたが、うまくいきませんでした。
他のすべての div の上に配置したい div に絶対位置を使用できません。

私は何かを逃していますか？これは私のコードです

<style>.style1 {
    height: 300px;    width:200px;    float:left;
    border: 1px solid red;    background-color: yellow;
    z-index:3;
}
.style2 {
    height: 200px;    width: 200px;    float:left;
    border: 1px solid black;    background-color: red;
    margin-left:-50px;
    z-index:3;
}
.style3 {
    height: 200px;    width: 200px;    float:left;
    border: 1px solid black;    background-color: orange;
    z-index:0; margin-left:-90px;
}</style>

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" class="style1"></div>
<div id="container2" class="style2"></div>
<div id="container3" class="style3"></div>

$(function () {
    var renderer = new Highcharts.Renderer(
    $('#container')[0],
    200,
    200);

    renderer.rect(10, 10, 100, 50, 5).attr({
        fill: 'blue',
        stroke: 'black',
            'stroke-width': 1
    }).add();

    renderer.circle(100, 100, 50).attr({
        fill: 'red',
        stroke: 'black',
            'stroke-width': 1
    }).add();


    drawChart1();
    drawChart2();
    //renderer.toFront();
});


function drawChart1() {
    c = new Highcharts.Chart({
        chart: {
            renderTo: 'container2',
            borderWidth:1,borderRadius:0,
        },
        title: {
            text: 'Chart 1'
        },

        series: [{
            data: [1, 2, 3]
        }]
    });
};

function drawChart2() {
    c = new Highcharts.Chart({
        chart: {
            renderTo: 'container3',
            borderWidth:1,borderRadius:0,
        },
        title: {
            text: 'Chart 2'
        },

        series: [{
            data: [1, 2, 3]
        }]
    });
};

ここでフィドルを作成しました