How to set a element's z-index higher than it appended neighbor

Question

I am working on a chart that show a tooltip when hover on it. Inside the ring, there is a board showing current total status.

I am able to make that tooltip non-transparent when it appear on top of the pie chart slice.

However, it appear as transparent when it overlay with the inner diagram (as below)

I understand this may seem to stupid to ask, but I have been struggling to make it non-transparent when it overlay with the inner diagram.

Any idea that I can make the tooltip non blocked by the inner div?

In the code structure: The highchart(pie chart and tooltip is also part of it) is stacking on the ChartInnerStatus

So, I think that's the reason why the tooltip is under the inner status.

<HighchartsReact highcharts={Highcharts} options={chartOptions} />
      <ChartInnerStatus
        customAssetAllocations={customAssetAllocationsToGrid}
      ></ChartInnerStatus>

What I did is to set tooltips 'z-index': 500, position as relative to make it on top of the inner status again.

But I got this error, even I set it position as relative.

I understand that parent can never cover its child, but tooltips would only appear when hovering. Is it still able to make it cover its child?

Is there way to make the inner status below the tooltip when tooltip appear or way to make that inner circle transparent so that it shows the element behind it??