儿童与父母之间的z指数

Question

我在处理我们正在处理的应用程序的z-index顺序时遇到问题,我有两个根父母,一个导航栏和一个地图,还有一个孩子,即地图工具提示.导航栏应该在地图上方可见,因此它具有更高的z-index,但问题是使地图容器中的工具提示也显示在侧边栏上,有点难以解释,因此您可以将其可视化http://jsbin.com/afakak/2/edit#javascript,html,live上的案例:

 <div id="nav-bar">
    The nav bar
  </div>

  <div id="map-container">
      This is the map container
      <div id="tooltip">
            This is the Tooltip
      </div>
  </div>

谢谢你的帮助.

Answer 1

如果#map-container定位(即不是静态的),这是不可能的,因为比较z-index的方式:

body(或任何其他定位父元素)是用于两个参考#map-container和#nav-bar.z-index您提供的任何内容都是根据父元素计算的.因此,具有较高z-index的2个元素之一将呈现在另一个元素及其所有子元素之上.Z-index #tooltip只会与其他孩子进行比较#map-container.

你可以像Nacho所说的那样静态地定位#map-container.如果您愿意,可以通过Javascript模拟固定定位.

如果你不能做到这一点,你需要改变你的标记,让#nav-bar和#tooltip有一个共同的定位父元素.移动#nav-bar到内部#map-container或#tooltip移出内部.