儿童和父母之间的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-索引被比较的方式如下：

body（或任何其他定位的父元素）是#map-container和#nav-bar的参考。你给他们的任何z-index都是针对父元素计算的。因此，z-index较高的两个元素中的一个将被渲染为另一个及其所有子元素。 Z指数#tooltip只会与#map-container的其他子女进行比较。

你可以做纳乔说的静态位置#map-container。如果你喜欢，你可以通过Javascript模拟固定位置。

如果你不能这样做，你需要改变你的标记，以便#nav-bar和#tooltip有一个共同定位的父元素。请将#nav-bar移至#map-container或#tooltip之外。

Answer 2

如果在真正的页面中，tooltip必须建立在徘徊地图容器只所示，你可能只是动态的改变它的z-index像这样：

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

否则，你需要改变位置的tooltip，以便nav-bar不重叠。

Answer 3

你必须绝对定位nav-bar和tooltip（否则的z-index不会在帐户中扣除），并维持map-container静态定位

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

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

#tooltip{ 
    ... 
    position: absolute 
} 

Answer 4

我想你可以用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 5

下面的解决方案应该工作，但我不知道，如果你有一个像保持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 6

经历后，你的代码，我注意到了这一点。

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

您的#tooltip有一个z-index，但没有定位。 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 7

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

这解决了我的类似界限。