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/

将文本定位在画布上：相对/绝对定位？ z-index的？

1 个答案: