React-Map-GL: How to make hovered marker appear on top?

Question

I have a map with different markers and as much as I am aware the markers are rendered in the order they appear which means marker 3 is on top of marker 1 and 2. I am using React Map Gl with mapblibre-gl and React(typescript) I'm fine with that, but if I hover an marker I want the hovered marker to be on top(when overlaying with another marker). I tried z-index but it does not work at all.

Maker:

<Marker latitude={station.lat} longitude={station.lng} key={station.id}>
  <div className='locDot'>
    <div className='priceTag'>
      <span id="brand">{station.brand ? station.brand : 'freie Tankstelle'}</span>
      <span id="price">{price}</span>
    </div>
  </div>
</Marker>

This marker is than pushed in an array and returned as component of many markers.

CSS:

.locDot{
    /* position: absolute; */
    height: 12px;
    width: 12px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background-color: #1E90FF;
    border: 2px solid #fff;
    border-radius: 100%; 
    /* z-index: 1; */
}

.priceTag{
    /* position: relative; */
    display: flex;
    flex-direction: column;
    background-color: #1E90FF;
    padding: 4px 6px;
    font-size: 1rem;
    font-weight: 400;
    color: white;
    margin-bottom: 18px;
    border-radius: 5px;
    /* line-height: 1rem; */
    z-index: 1;
}

.priceTag:hover{
    position: absolute;
    border: 5px solid red;
    z-index: 5;
}

Sandox: codesandbox.io/s/vigorous-mahavira-gxk6wj?file=/src/App.tsx

Answer 1

The solution could be add this in your styles.css.

.maplibregl-marker:hover {
  z-index: 1000;
}

Here is reproducible code.