var map = L.map('map-content', {縮放控制:假}).setView([51.505, -0.09], 13);L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {attribution: '地圖數據和副本;<a >OpenStreetMap</a>貢獻者，<a >CC-BY-SA</a>，圖像 ? <a rauschundrausch.cih3gisks00r8rlly0ob5s2me',訪問令牌:'pk.eyJ1IjoicmF1c2NodW5kcmF1c2NoIiwiYSI6ImNpaTYyeW14MTAwNml2eW0zcmR6aHIzdDcifQ.6T8nzYq49rFnvcqk6lgYPg'}).addTo(地圖);var marker = L.marker([51.5, -0.09]).addTo(map);marker.bindPopup("這是一個<br>大<br>popup<br>在<br>高度方面");var mapNav = document.getElementById("map-nav");var mapPane = document.querySelector(".leaflet-map-pane");var rxTranslate =/translate(?:3d)?(([^)]+))/i;mapPane.appendChild(mapNav);var觀察者=新MutationObserver(函數(突變){if (mutations.some(m => m.attributeName === "style")) {//應用逆變換mapNav.style.transform = "翻譯(" + mapPane.風格.轉變.match(rxTranslate)[1].分裂("，").slice(0, 2)/* 只提取 x 和 y；丟棄 z */.map(n => parseFloat(n) * -1 + "px")/* 反轉值 */+ ")";}});觀察者.觀察(mapPane，{屬性:真});

#map {位置:固定；頂部:0；右:0；底部:0；左:0；}#地圖導航{位置:絕對；左:10px；頂部:10px；寬度:100px；高度:100px；背景顏色:#ccc；z 指數:200；盒子陰影:插圖 0 0 0 1px #f00;}#地圖內容{寬度:100%；高度:100%；}.傳單彈出窗格{z指數:3；}

<link rel="stylesheet" /><script src="https://code.jquery.com/jquery-2.1.4.min.js"></script><script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script><div id="地圖"><div id="地圖內容"><div id="map-nav"></div></div></div>

var map = L.map('map-content', {
  zoomControl: false
}).setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
  attribution: 'Map data &copy; <a >OpenStreetMap</a> contributors, <a >CC-BY-SA</a>, Imagery ? <a ,
  maxZoom: 18,
  id: 'rauschundrausch.cih3gisks00r8rlly0ob5s2me',
  accessToken: 'pk.eyJ1IjoicmF1c2NodW5kcmF1c2NoIiwiYSI6ImNpaTYyeW14MTAwNml2eW0zcmR6aHIzdDcifQ.6T8nzYq49rFnvcqk6lgYPg'
}).addTo(map);

var marker = L.marker([51.5, -0.09]).addTo(map);
marker.bindPopup("this is a<br>large<br>popup<br>in<br>terms of height");

var mapNav = document.getElementById("map-nav");

var mapPane = document.querySelector(".leaflet-map-pane");

var rxTranslate = /translate(?:3d)?(([^)]+))/i;

mapPane.appendChild(mapNav);

var observer = new MutationObserver(function(mutations) {
  if (mutations.some(m => m.attributeName === "style")) {
    // apply an inverse transform
    mapNav.style.transform = "translate(" + mapPane
      .style
      .transform
      .match(rxTranslate)[1]
      .split(",")
      .slice(0, 2) /* extract only x and y; discard z */
      .map(n => parseFloat(n) * -1 + "px") /* invert values */ + ")";
  }
});

observer.observe(mapPane, {
  attributes: true
});

#map {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#map-nav {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 100px;
  height: 100px;
  background-color: #ccc;
  z-index: 200;
  box-shadow: inset 0 0 0 1px #f00;
}
#map-content {
  width: 100%;
  height: 100%;
}
.leaflet-popup-pane {
  z-index: 3;
}

<link rel="stylesheet"  />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<div id="map">
  <div id="map-content">
    <div id="map-nav"></div>
  </div>
</div>