How to overlay content on the Leaflet map

HTML-CSS
5

Thank you.

If I do the following:

.Main-UI-Container {
  position: fixed;
  z-index: 9999;
  background-color: #efefef;
  top: 0;
  left: 0;
  height: 50vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

I get the following:

image
image810×892 159 KB

When I click and drag on the “Content here” section, it still clicks and drags on the map.

The content area’s z-index is higher than that of the map, but this does not disable the map’s event listener initiation in the content sections.

Since the content section will contain drag-sensitive items (e.x., draggable graphs), how can I disable the dragging in this area?