定位文本超过 canvas：relative/absolute 定位？ z 索引？

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 作为父元素，但这样做会丢失我的格式（图表不能再并排显示）。我试图让每个图表中的文本死点。

Fiddle: 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/

定位文本超过 canvas：relative/absolute 定位？ z 索引？

Positioning text over canvas: relative/absolute positioning? z-index?

html

css

position