Canvas on aspx page is always on top of div - asp.net

I have a master page with a fixed header/div on top of page. Using this, I can scroll my webpages vertically with fixed headers on top. But now I have to show some graphs on one of my webpage. And I used Rgraph opensource for it. It draws the graph using inside a canvas. But now when I scroll down the page, these canvas goes on top of headers. not behind the fixed headers. Can I place the canvas behind the fixed div/header when scrolls ?

On master page :

<body >
    <form id="form1" runat="server"  >
          <div style="backgroundcolor:#008080;width:100%;margin:-8px;position:fixed;">
//naviagtion menu items with fixed headers are here
    </div>
    <div style="width:100%;margin:-8px;">
       <asp:ContentPlaceHolder id="MainContent" runat="server"> 
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>

On chart displaying page :

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<table  style="z-index: 0;position: relative" >
 <tr>
 <td style="vertical-align:top;">  
 <canvas id="cvs1" width="300" height="200">[No canvas support]  
 </canvas>
 </td>
</tr>
</table>
 <script>
         //==========Draw charts==========
        function SemiCIrcularChart(currentbalance,Maxcapacity) {
            new RGraph.SemiCircularProgress({
                id: 'cvs1',
                min: 0,
                max: Maxcapacity,
                value: currentbalance,
                options: {
                     colors: ['#F13328','#FD9C96'],
                    tooltips: ['Balance'],
                    scaleDecimals: 0,
                    scaleUnitsPost: 'Ltr',
                    labelsCenterSize: 18,
                    textColor: 'gray'
                }
            }).draw();
        }
</script>
</asp:Content>

enter image description here

Solution

It sounds like you have a z-index set on the canvas or when of its parents - so either get rid of this or set one on the canvas itself eg:

z-index: 0