小册子定制控制在一切前面

Question

我正在使用传单，并希望在我的传单地图上添加一些自定义控件。这工作得很好。不过我的问题是，这些自定义控件更多地位于地图前面而不是“＃”;地图。

所以这里有一个例子来更好地理解我的意思:(导航栏与传单地图在同一个html文件中）

我有一个导航栏，下面是传单地图。小册子地图的左角是自定义控件（指南针）。所以现在当我使用导航栏中的下拉菜单时，我几乎无法点击选项，因为自定义控件位于其前面＆＃39;并阻止了打击的屁股。 （见下图）。

有没有办法让自定义控件更多地放在地图上而不是地图前面？

这是我的自定义控件（指南针）：

onAdd: function() {
        var controlDiv = L.DomUtil.create('div', 'leaflet-compass');
        L.DomEvent
          .addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
          .addListener(controlDiv, 'click', L.DomEvent.preventDefault);
        var compassDiv = document.createElement('div');
        compassDiv.id = 'compassGroup';

        var compassImage = document.createElement('img');
        compassImage.id = 'cpImage';
        compassImage.setAttribute('src', 'images/kompass.png');

        var speedHeadline = document.createElement('h2');
        speedHeadline.id = 'speedHL';

        var arrowImage = document.createElement('img');
        arrowImage.id = 'arImage';

        arrowImage.setAttribute('src', 'images/arrow.png');
        controlDiv.appendChild(compassDiv);
        compassDiv.appendChild(compassImage);
        compassDiv.appendChild(arrowImage);
        controlDiv.appendChild(speedHeadline);
        return controlDiv;
      }
    });

L.control.compass = function(options) {
      return new L.Control.Compass(options);
    };

function initCompass(map, timestamp) {
      var compassControl = L.control.compass();
      map.addControl(compassControl);
      rotateCompass(timestamp);

    }