Leaflet全屏模式下侧边栏保持可见问题求助

API 探路者

2026-8-25

Leaflet全屏模式下侧边栏无法显示的问题解决

我使用CodeIgniter3框架开发，在header.php中引入了Bootstrap5，视图页面里引入了Leaflet地图CDN、leaflet.fullscreen CDN以及jQuery CDN。

非全屏模式下，以下代码能正常实现侧边栏在地图上方显示且可拖拽的效果：

$("#map").css('z-index', 0);
$("sidebar").css('position', 'absolute')
$("sidebar").css('z-index', 1);
$("sidebar").draggable();
$("card-header-sidebar").css('cursor', 'grab');

但切换到Leaflet全屏模式后，侧边栏会被地图遮挡或消失，无法保持可见。（非全屏状态：侧边栏正常悬浮在地图上方；全屏状态：侧边栏不可见）

问题原因及解决方案

选择器错误：原代码中的$("sidebar")和$("card-header-sidebar")是直接选择标签，实际侧边栏和头部应该是类或ID元素（比如.sidebar或#sidebar），这会导致样式无法正确应用。
定位方式问题：absolute定位是相对于最近的已定位父元素，进入全屏后Leaflet会将地图容器设为全屏且层级很高，absolute定位的侧边栏会被覆盖，改用fixed定位（相对于视口）即可避免。
层级不足：全屏时地图的z-index会被提升，需要给侧边栏设置足够高的z-index确保它在最上层。

修改后的代码示例

// 基础样式初始化（修正选择器+调整定位与层级）
$("#map").css('z-index', 0);
$(".sidebar").css({
  'position': 'fixed',
  'z-index': 9999,
  'top': '20px',
  'left': '20px'
});
$(".sidebar").draggable();
$(".card-header-sidebar").css('cursor', 'grab');

// 监听Leaflet全屏切换事件，动态适配样式
map.on('fullscreenchange', function () {
  if (map.isFullscreen()) {
    $(".sidebar").css({
      'position': 'fixed',
      'z-index': 9999
    });
  } else {
    // 退出全屏后可按需恢复absolute定位
    $(".sidebar").css('position', 'absolute');
  }
});