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

如果在实际页面中，只有在悬停地图容器时才显示tooltip，您可以像这样动态更改其z-index：

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

否则，您需要更改tooltip的位置，以便nav-bar不与其重叠。

Answer 4

您必须绝对定位nav-bar和tooltip（否则不会考虑z-index），并保持map-container静态定位

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

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

#tooltip{
    ...
    position: absolute
}

Answer 5

我认为使用position: fixed上的#map-container执行此操作的唯一方法是重新构建工具提示，以便在#map-container.之外显示所以点击“内部”图标在地图容器中，工具提示本身显示在两者之上（使用正确的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 6

完成后，你的代码，我注意到了这一点。

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

你的#tooltip有一个z-index，但它没有定位。 Z-index属性仅在其具有position属性值之一时才有效。考虑到你希望工具提示脱颖而出，你应该使用像这样的绝对位置值。

 #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 7

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

这解决了我类似的delimma。

儿童与父母之间的z指数

7 个答案: