將文字定位在畫布上：相對/絕對定位？ z-index的？

Question

我有兩個使用Chart.js和兩個div元素的甜甜圈圖。我試圖將div放在圖表的頂部，但沒有運氣。值得注意的是，這些圖表是並排的。

<div id="breakdownWrap">hi</div> 
<div id="scoreWrap">hello</div> 
<canvas id="reviewBreakdown" width="150" height="150"></canvas> &nbsp; 
<canvas id="reviewScore" width="150" height="150"></canvas> 

我的理解是我需要div作爲父元素，但這樣做會失去我的格式（圖表不能再是並排）。我試圖在每個圖表中獲得文本死點。

小提琴：https://jsfiddle.net/of5a8ub5/

Answer 1

我與你的jsfiddle工作，改變結構（HTML），加入一些CSS，我得到你想要的結果。

HTML：

<div id="breakdownWrap" class="wrapper"><div class="text">hi</div> 
<canvas id="reviewScore" width="150" height="150"></canvas> 
</div> 
          <div id="scoreWrap" class="wrapper"><div class="text">hello</div> 
<canvas id="reviewBreakdown" width="150" height="150"></canvas> 
</div> 

CSS：

.wrapper{ 
    position: relative; 
    display: inline-block; 
} 

.text{ 
    position: absolute; 
    text-align: center; 
    width: 100%; 
    line-height: 150px; 
} 

canvas{ 
    position: relative; 
    z-index: 1; 
} 

看看，並告訴我，如果這解決您的問題。

https://jsfiddle.net/lmgonzalves/of5a8ub5/3/