的z-index不與位置固定工作

Question

我有類似如下的CSS：

#one{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: 999; 
} 
#two{ 
    position: relative; 
    z-index: 9; 
    width: 200px; 
    height: 200px; 
    background: red; 
} 
#link{ 
    position: relative; 
    z-index: 9999999; /*this is not in higher layer why??? */ 
} 

我不能增加的#two的z指數按我的設計。

但我已經給#link分配了更高的z-index，但它沒有進入更高層。

那麼，爲什麼固定位置阻塞到圖層（z-index）？

jsfiddle

如果#one的立場沒有定位固定的，那麼它會正常工作。所以，我的問題是爲什麼固定位置給我一個錯誤？

Answer 1

爲什麼固定的位置被阻斷層（Z-索引）？

這是因爲The stacking context。 CSS定位並向元素添加z-index值會創建新的堆疊上下文。

從MDN page：

注：堆疊內容的層次是HTML元素層次結構的一個子集。

因此你的具體情況：

<div id="one"> 
    <div id="overlay"></div> 
</div> 
<div id="two"> 
    <a href="#" id="link">test</a> 
</div> 

堆疊上下文的層次結構是：

• 根
  • #one
  • #two
    • #link

而且#link將下#one無論其z-index值多少是被放置。

一個選項是增加值#two元素（大於#one）。

Answer 2

您需要添加z-index爲包裝div

#two{ 
    position: relative; 
    z-index: 9; 
    width: 200px; 
    height: 200px; 
    background: red; 
    z-index: 9999; 
} 
#link{ 
    position: relative; 
} 

Answer 3

因爲#link的z-index相對於#two的（這是#link的母公司）z-index然後#one的和#two的z-index是相對的給他們的父母（在這種情況下爲body）。

Answer 4

你想鏈接懸停#two？ 這樣的事情？

#one{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: 1; 
} 
#two{ 
    position: relative; 
    z-index: 2; 
    width: 200px; 
    height: 200px; 
    background: red; 
} 
#link{ 
    position: relative; 
    z-index: 9999999; 
} 

http://jsfiddle.net/0q84xq87/1/