혼란이

Question

내가, 하나는 검은 색 오버레이 두 개의 층 않은 : 나는 오버레이 및 컨테이너 쇼를하자 싶어

#wrap { 
    z-index: 999 
    width:600px; 
    height:600px; 
    border:5px solid black; 
    display:none; 
    color:red; 
} 

:

#overlay { 
    background: rgba(0,0,0,0.7); 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0; 
    top: 0; 
    z-index: 0; 
    display: none; 
} 

다른 하나는 내 텍스트 컨테이너입니다 동시에 : 나는 오버레이설정하고 있지만

$(document).click(function() { 
    $('#overlay').add('#wrap').fadeIn(); 
})​​ 

하지만 텍스트 컨테이너는 오버레이에서 항상 0-용기 z-index

999 데모 설정은

here 마침내 내가 z-index-1에 오버레이를 설정해야합니다, 그것은 일하는 것이 발견된다.

오버레이의 z-index을 더 높게 설정할 수없는 이유는 위치가 고정 되었기 때문입니까?

Answer 1

z-index은 흐름 위치 지정이 적용되어 #wrap에 적용되지 않습니다. z-index이 적용되기 전에 상자의 크기는 적어도 position: relative;이어야합니다.

또한 z-index 값의 세미콜론 값이 누락되었습니다. 그것을 z-index: 999;으로 만들면 작동합니다. 내 코드는 아래와 같다 :

는

#wrap { 
    z-index: 999; 
    width:600px; 
    height:600px; 
    border:5px solid black; 
    background: #FFF; 
    display:none; 
    color:red; 
    position: relative; } 

Answer 2

위치 고정 (기본)와 요소가 Z- 인덱스 특성에 영향을받지

는 상대적

에 그 위치를 변경할