I have a div with some html producing a complex graph. I need to put on label on top and one on the bottom of the graph overlaying the graph div (ideally covering 10% of the top and the bottom of the graph div area).
I am trying a mock example below but I cannot find why only the bottom label works. How to overlay the top label on the graph div? What am I missing? Is is possible to do it as a % of the graph div area?
<div class="z position-relative">
<div style="position:absolute; z-2">
<h2 style="background-color:grey;" >Top Label</h2>
</div>
<div style="height:100px; width:100px; margin-top:40px; margin-left:20px; background-color:red; position:absolute;">
GRAPH
</div>
<div style="height:100px; width:100px; margin-top:90px;
background-color:orange; position:absolute; z-1;">
<h2>Bottom Label</h2>
</div>
</div>