css - child 和 parent 之间的 z-index

Question

我在为我们正在处理的应用程序计算 z-index 顺序时遇到问题，我有两个根父项，一个导航栏和一张 map ，还有一个子项， map 工具提示。导航栏应该在 map 上方可见，因此它具有更高的 z-index，但问题是要使 map 容器中的工具提示也显示在侧边栏上方，有点难以解释，因此您可以想象关于 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 个元素之一将呈现在另一个元素及其所有子元素之上。 #tooltip 的 Z-index 只会与 #map-container 的其他 child 进行比较。

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

如果您不能这样做，您需要更改您的标记，以便 #nav-bar 和 #tooltip 具有共同的定位父元素。要么将 #nav-bar 移到 #map-container 中，要么将 #tooltip 移出它。