如何用CSS让div覆盖Google Maps API全屏状态下的地图？

我太懂这个坑了！你遇到的核心问题是真正全屏（浏览器级全屏）的堆叠上下文机制——当Google Maps触发全屏时，它是让地图容器调用了requestFullscreen()，这时候这个容器就变成了浏览器的全屏根元素，所有不在这个容器内部的DOM元素，不管你设置多大的z-index，都会被渲染在全屏元素的下方，因为全屏元素的层级是浏览器最高的，和普通的堆叠上下文完全不是一个级别。

下面给你两种靠谱的解决方案，按优先级推荐：

方案1：将高亮Div移入地图容器（最简单有效） #

这是最直接的办法，把你的高亮Div放到地图容器内部，这样当地图全屏时，Div和地图处于同一个堆叠上下文，z-index就能正常生效了。

步骤： #

1. 调整HTML结构：
   把你的.fixed Div从原来的位置移到地图容器里面，比如：

   <!-- 原来的地图容器 -->
   <div id="map-container">
     <!-- 现在把高亮Div放进来 -->
     <div class="fixed">你的高亮内容</div>
     <!-- Google Maps会自动渲染到这个容器里 -->
   </div>
   

2. 修改CSS样式：
   把原来的position: fixed改成position: absolute，因为地图容器全屏后是块级元素，绝对定位的子元素会基于它定位：

   .fixed {
     position: absolute;
     z-index: 10000; /* 大于Google Maps默认控件的z-index（一般是1000左右） */
     top: 20px;
     left: 20px;
     background: rgba(255,255,255,0.9);
     padding: 10px 15px;
     border-radius: 4px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.2);
   }
   

   如果非全屏时你还是需要固定定位，可以加个状态区分：

   /* 非全屏时保持固定定位 */
   #map-container:not(:fullscreen) .fixed {
     position: fixed;
   }
   

方案2：监听全屏事件动态移动Div（适合无法修改初始结构的场景） #

如果因为AngularJS组件结构限制，不能一开始就把Div放进地图容器，那可以监听全屏事件，在地图进入全屏时把Div临时移入容器，退出时移回原位置。

代码示例（AngularJS控制器内）： #

angular.module('yourApp').controller('MapCtrl', function($scope) {
  const mapContainer = document.getElementById('map-container');
  const highlightDiv = document.querySelector('.fixed');
  // 保存Div原来的父元素，退出全屏时移回去
  const originalParent = highlightDiv.parentElement;

  // 监听全屏变化事件（兼容所有浏览器）
  const fullscreenEvents = [
    'fullscreenchange',
    'webkitfullscreenchange',
    'mozfullscreenchange',
    'msfullscreenchange'
  ];

  function handleFullscreenChange() {
    const activeFullscreenEl = document.fullscreenElement || 
                              document.webkitFullscreenElement || 
                              document.mozFullScreenElement || 
                              document.msFullscreenElement;

    if (activeFullscreenEl === mapContainer) {
      // 地图进入全屏：把Div移入地图容器
      mapContainer.appendChild(highlightDiv);
      highlightDiv.classList.add('fullscreen-active');
    } else {
      // 退出全屏：把Div移回原位置
      originalParent.appendChild(highlightDiv);
      highlightDiv.classList.remove('fullscreen-active');
    }
  }

  // 绑定事件监听
  fullscreenEvents.forEach(event => {
    document.addEventListener(event, handleFullscreenChange);
  });

  // 控制器销毁时移除监听，避免内存泄漏
  $scope.$on('$destroy', () => {
    fullscreenEvents.forEach(event => {
      document.removeEventListener(event, handleFullscreenChange);
    });
  });
});

配套CSS： #

.fixed {
  position: fixed;
  z-index: 10000;
  top: 20px;
  left: 20px;
  /* 其他基础样式 */
}

.fixed.fullscreen-active {
  /* 全屏时切换为绝对定位 */
  position: absolute;
  /* 可以调整全屏时的位置，比如右上角 */
  right: 20px;
  left: auto;
}

关键原理再强调一下 #

普通的z-index只在同一个堆叠上下文里生效，而浏览器的真正全屏元素会创建一个顶级的堆叠上下文，所有不在这个元素内部的DOM都会被压在下面。所以不管你给外部Div设置多大的z-index，都跳不出这个限制——必须让Div进入全屏元素的内部，才能参与同一层级的渲染竞争。

内容的提问来源于stack exchange，提问作者Scoob