Задать карту как фон на сайте

Всем привет. Хочу задать на свой сайт карту как фон. Но она постоянно перекрывает другие блоки.

    <!-- Карта -->
<div id="mapstore"></div>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const map = L.map("mapstore", {
            center: [29.7604, -95.3698],
            zoom: 10,
            scrollWheelZoom: false, // Отключаем зум колесиком по умолчанию
            dragging: false // Отключаем перемещение по умолчанию
        });
    
        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
            maxZoom: 19,
            attribution: '&copy; OpenStreetMap contributors',
        }).addTo(map);
    
        const locations = [
            <?php for ($i = 1; $i <= 3; $i++): 
                $lat = get_field("location_{$i}_lat"); 
                $lng = get_field("location_{$i}_lng"); 
                $popup = get_field("location_{$i}_popup");
                if ($lat && $lng): 
            ?>
                { coords: [<?php echo esc_js($lat); ?>, <?php echo esc_js($lng); ?>], popup: "<?php echo esc_js($popup); ?>" },
            <?php endif; endfor; ?>
        ];
    
        locations.forEach((loc) => {
            L.marker(loc.coords)
                .addTo(map)
                .bindPopup(loc.popup);
        });
    
        // Включение интерактивности карты при клике
        document.getElementById("mapstore").addEventListener("click", function () {
            map.scrollWheelZoom.enable();
            map.dragging.enable();
        });
    
        // Отключение прокрутки при уходе мыши
        document.getElementById("mapstore").addEventListener("mouseleave", function () {
            map.scrollWheelZoom.disable();
            map.dragging.disable();
        });
    });
</script>

.store__main {
  padding: 108px 0;
  margin-top: -35px;
  position: relative;
    z-index: 10;
}

#mapstore {
    position: fixed; /* Фиксируем карту на фоне */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Растягиваем карту на всю высоту экрана */
    z-index: -1;
}

Когда я задаю z-index карте 0 или больше, выглядит это вот так. Почему так? Как исправить?