儿童和父母之间的z指数 [英] z-index between Children and Parents

问题描述

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

 < div id =nav-bar> 
导航栏
< / div> 
 
< div id =map-container> 
这是地图容器
< div id =tooltip> 
这是工具提示
< / div> 
< / div>感谢您的帮助。
解决方案
如果＃map-container 定位（即不是静态的），这是不可能的，因为z-索引的比较方式： 
 
 
 
  body （或任何其他定位的父元素）是 #map -container 和＃nav-bar 。给出的任何 z-index 都是相对于父元素计算的。因此，具有较高z-index的2个元素中的一个将被渲染在另一个和所有其子元素之上。只有＃map-container 的其他子项才会比较 #tooltip 的Z索引。
 
 
 
你可以做Nacho说，并静态定位＃map-container 。 
 
 
 
如果你不能这样做，你需要改变你的标记，使 #nav -bar 和 #tooltip 有一个公共定位的父元素。在＃map-container 中移动＃nav-bar 或 #tooltip 出来。
 
I'm having problems working out the z-index order for an application we're working on, i have two root parents, a nav bar and a map, and one child, the map tooltip. The navbar should be visible above the map, so it has a higher z-index, but the problems is to make the tooltip in the map container to be displayed over the sidebar as well, a bit hard to explain, so you can visualize the case on 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>
Thanks for any help.
解决方案
If #map-container is positioned (i.e. not static), this is not possible, because of the way z-index is compared:

body (or any other positioned parent element) is the reference for both #map-container and #nav-bar. Any z-index you give them is calculated in respect to the parent element. So the one of the 2 elements with the higher z-index will be rendered above the other one and all its child elements. Z-index of #tooltip will only be compared with other children of #map-container.

You could do as Nacho said and statically position #map-container. You can simulate fixed positioning via Javascript, if you like.

If you cannot do that, you need to change your markup, so that #nav-bar and #tooltip have a common positioned parent element. Either move #nav-bar inside #map-container, or #tooltip out of it.

                        
这篇关于儿童和父母之间的z指数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！