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>
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