孩子和父母之间的 z-index

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 个元素之一将渲染在另一个元素及其所有子元素之上。 #tooltip 的 Z-index 只会与 #map-container 的其他子级进行比较。

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

如果您无法做到这一点，则需要更改标记，以便 #nav-bar 和 #tooltip 具有共同的定位父元素。将 #nav-bar 移至 #map-container 内，或将 #tooltip 移出其中。

Answer 2

下面的解决方案应该有效，但我不知道您是否有将 nav-bar 保留在 map-container 之外的要求。如果是这样，我认为没有解决方法。

CSS：

#tooltip-helper{
    position:relative;
    /*below properties are to demonstrate the helper*/
    width:10px;
    height:10px;
    background-color:green;
    top:200px;
    left:200px;
}

#tooltip
{
    position:absolute;
    top:10px;/*this is just to make sure helper is visible*/
    left:-100px;/*this is to center the tooltip*/
    width: 200px;
    height: 200px;
    background-color: yellow;
    color: black;
    padding: 10px;
    z-index: 15;
}

HTML：

<div id="map-container">
    <div id="nav-bar">
      The nav bar
    </div>
    This is the map container
    <div id="tooltip-helper">
          <div id="tooltip">This is the Tooltip</div>
    </div>
</div>

Answer 3

您必须绝对定位 nav-bar 和 tooltip （否则 z-index 将不会被考虑在内），并维护 map-container静态定位

#map-container{
    ...
    position: static;
    ...
}

#nav-bar{
    ...
    position: absolute;
}

#tooltip{
    ...
    position: absolute
}

Answer 4

我认为使用 #map-container 上的 position:fixed 实现此目的的唯一方法是重构工具提示以显示在 #map- 之外 因此，单击地图容器“内部”的图标时，工具提示本身会显示在两者上方（设置了正确的 z-index）。

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

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

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

Answer 5

在查看了你的代码后，我注意到了这一点。

 #tooltip{
background-color: yellow;
width: 200px;
height: 200px;
color: black;
padding: 10px;
z-index: 15;
    }

您的 #tooltip 有 z 索引，但未定位。 Z-index 属性仅在具有位置属性值之一时才起作用。考虑到您希望工具提示突出，您应该像这样使用绝对位置值。

 #tooltip{
position: absolute;
background-color: yellow;
width: 200px;
height: 200px;
color: black;
padding: 10px;
z-index: 15;
 }

HTML

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

这使 #tooltip 保持在顶部......

Answer 6

对于未来遇到类似问题的读者 -
如果冲突的子项是 position:fixed，请考虑将父容器的高度设置为 0px，然后将任何父级背景显示设置转移到冲突子项的共同祖父上。

这解决了我类似的困境。

Answer 7

如果在实际页面中，仅在将鼠标悬停在地图容器上时才需要显示 tooltip，则您可以像这样动态更改其 z-index：

#map-container:hover
{
    z-index: 16
}

否则您需要更改 的位置>工具提示，以便导航栏不会与其重叠。