兒童和父母之間的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，然後將任何父級背景顯示設置轉換爲衝突孩子的共同祖父母。

這解決了我的類似界限。