Z- 인덱스 위치와 함께 작동하지 않습니다

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- 색인을 할당했지만 상위 계층에는 들어 가지 않습니다.

그래서 고정 된 위치가 레이어 (z- 색인)에서 차단되는 이유는 무엇입니까? #one의 위치는 다음 고정 위치하지 않은 경우

jsfiddle

그것을 잘 작동합니다. 그래서, 제 질문은 왜 고정 위치가 나에게 버그를주는 이유입니까?

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

상관없이 그 z-index 값이 얼마나 #one 아래에 배치되지 않을 것입니다.

값이 #two 요소 (#one 이상)로 증가하는 옵션이 있습니다.

Answer 2

당신은 #link의 (#link 'z-index 다음 #one의 부모)'의의의 z-index가 #two을 기준으로 '의 때문에 div

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

Answer 3

래퍼 할 z-index를 추가해야하고 #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/