diff --git a/dve.js b/dve.js
index ec95cc4..76350fa 100644
--- a/dve.js
+++ b/dve.js
@@ -258,11 +258,12 @@ function sync(source) {
   updateCrosshairs();
 }
 
-function createLayer(config) {
+function createLayer(config, zIndex) {
   if (config.type === "xyz") {
     return L.tileLayer(config.url, {
       maxZoom: 19,
       tileSize: 256,
+      zIndex,
       referrerPolicy: "strict-origin-when-cross-origin"
     });
   }
@@ -274,26 +275,37 @@ function createLayer(config) {
       transparent: config.transparent ?? true,
       version: config.version || "1.3.0",
       attribution: config.attribution || "",
+      zIndex,
       referrerPolicy: "strict-origin-when-cross-origin"
     });
   }
 }
 
-function setLayer(map, config, currentLayer) {
+function setLayer(map, config, currentLayer, zIndex) {
   if (currentLayer) map.removeLayer(currentLayer);
 
-  return createLayer(config).addTo(map);
+  return createLayer(config, zIndex).addTo(map);
+}
+
+function bringOverlayLayersToFront(index) {
+  Object.values(overlayLayers[index]).forEach(layer => {
+    layer.setZIndex(100);
+    layer.bringToFront();
+  });
 }
 
 function setBaseLayer(index, name) {
-  baseLayers[index] = setLayer(maps[index], TILE_SERVERS[name], baseLayers[index]);
+  baseLayers[index] = setLayer(maps[index], TILE_SERVERS[name], baseLayers[index], 1);
+  bringOverlayLayersToFront(index);
 }
 
 function setOverlayLayer(index, name, enabled) {
   if (enabled) {
     if (!overlayLayers[index][name]) {
-      overlayLayers[index][name] = createLayer(TILE_SERVERS[name]).addTo(maps[index]);
+      overlayLayers[index][name] = createLayer(TILE_SERVERS[name], 100).addTo(maps[index]);
     }
+
+    overlayLayers[index][name].bringToFront();
   } else if (overlayLayers[index][name]) {
     maps[index].removeLayer(overlayLayers[index][name]);
     delete overlayLayers[index][name];