keep highcharts legend responsive when another div lies over chart - reactjs

Question

I want to display html buttons in the four corners of a HighCharts polar chart's margins. I was able to layer the buttons over the chart div using css. However, doing this results in the chart legend items not responding to mouse clicks.
This is an example of the code for one of the buttons:
<div className="pop-chart-button pop-chart-button-top pop-chart-button-left">
<a role="button" onClick={this.showBrandQuadrantChart}>
<img src={expandImageUrl} alt="expand" /> BRAND
</a>
</div>
Is there some way to accomplish this that does not make the legend items unresponsive to mouse clicks?

Answer 1

Just by guessing without seeing your CSS code, the buttons z-index is underneath the chart. Setting the buttons to a higher z-index will probably fix the issue.

Answer 2

Solved my problem by setting a z-index for both chart and button divs and putting the chart div after the div containing the buttons.
Here are the scss styles:
.pop-kahn-chart-container {
position: relative;
.pop-chart {
z-index: 99;
}
.pop-chart-buttons {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
.pop-chart-button {
font-family: 'Montserrat', sans-serif;
font-style: normal;
font-size: 0.86rem;
font-weight: 600;
position: absolute;
z-index: 9;
a {
border-radius: 2px;
padding: 2px 8px;
color: $bp-green;
}
a:hover {
background-color: $bp-gray2;
}
img {
width: 19px;
height: 19px;
vertical-align: center;
position: relative;
top: -3px;
}
#include media-breakpoint-down(lg) {
font-size: 0.6rem;
img {
width: 14.25px;
height: 14.25px;
top: -2.25px;
}
}
}
.pop-chart-button-top {
top: 10%;
}
.pop-chart-button-bottom {
top: 85%;
}
.pop-chart-button-left {
left: 5%;
}
.pop-chart-button-right {
left: 75%;
}
}
}
Here is the code that renders the chart with overlaid buttons:
<div className="pop-kahn-chart-container">
<div className="pop-chart-buttons">
<div className="pop-chart-button pop-chart-button-top pop-chart-button-left">
<a role="button" onClick={this.showBrandQuadrantChart}>
<img src={expandImageUrl} alt="expand" /> BRAND
</a>
</div>
<div className="pop-chart-button pop-chart-button-top pop-chart-button-right">
<a role="button" onClick={this.showExperienceQuadrantChart}>
<img src={expandImageUrl} alt="expand" /> EXPERIENCE
</a>
</div>
<div className="pop-chart-button pop-chart-button-bottom pop-chart-button-left">
<a role="button" onClick={this.showLowPriceQuadrantChart}>
<img src={expandImageUrl} alt="expand" /> LOW PRICE
</a>
</div>
<div className="pop-chart-button pop-chart-button-bottom pop-chart-button-right">
<a role="button" onClick={this.showFrictionlessQuadrantChart}>
<img src={expandImageUrl} alt="expand" /> FRICTIONLESS
</a>
</div>
</div>
<div className="pop-chart">
<HighchartsReact highcharts={Highcharts} options={options} />
</div>
</div>