我有一个带有不同标记的Map，而且据我所知，标记是按其显示顺序渲染的，这意味着标记3位于标记1和2之上。我使用的是带有mapblibre-gl和React的React Map Gl（typescript）我没问题，但如果我悬停一个标记，我希望悬停的标记在顶部（当与另一个标记重叠时）。我尝试了z轴，但它根本不工作。
制造商：

<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 >

然后将此标记推入数组中，并作为许多标记的组件返回。
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;
}

山德士：codesandbox.io/s/vigorous-mahavira-gxk6wj?file=/src/App.tsx