Z- 색인 문제 CSS

컨테이너에 동적으로 생성 된 div가 있습니다.Z- 색인 문제 CSS

HTML

<div id="overlay"> 
</div> 
<div id="cont"> 
    <div id="e1"> 
     Some 
    </div> 
    <div id="e2"> 
     Content 
    </div> 
</div>

CSS

#cont{ 
    position: fixed; 
    top:40%; 
    left:20%; 
    z-index:999; 
    color:#a8a8a8; 
} 
#overlay{ 
    position:fixed; 
    background: rgb(0,0,0); 
    opacity: 0.5; 
    width:100%; 
    height:100%; 
    top:0; 
    left:0; 
    z-index:1000; 
} 
#e2{ 
    z-index:1001; 
}

확인이 jsfiddle :http://jsfiddle.net/UkbXU/

나는, Z- 인덱스 1000 배경 RGBA (0 오버레이가 0,0,0.5)와 사진 컨테이너가 오버레이 뒤에 있습니다. 하나의 요소 만이 오버레이 위에 오도록하고 싶습니다. 즉, Z- 인덱스 1001입니다. 컨테이너에 다른 요소가 있기 때문에 요소 강조 표시된 효과를 표시합니다. 하지만 Z-index : 1001 클래스를 만들면 오버레이 위에 요소가 표시되지 않습니다.

한 요소의 Z- 색인을 컨테이너보다 크게 설정할 수 있습니까?

출처

2013-03-17 Hari krishnan

당신은 콘텐츠 사업부에 오버레이 사업부를 이동해야합니다. http://jsfiddle.net/UkbXU/10/

그렇지 않으면 #cont와 #overlay가 모두 새로운 스태킹 컨텍스트를 만들기 때문에 불가능합니다. 이것들은 다시 병합 할 수 없습니다.

출처

2013-03-17 15:46:19 Stephan

그게 내가 한 일이야. http://jsfiddle.net/amullins/2WjCk/1/ –

예, 좋았지 만 #cont가 예. 사이드 바에있는 위젯을 누른 다음 오버레이는 위젯 영역 또는 전체 화면에서만 건너 뛸 수 있습니까? – Derfder

# 오버레이는 전체 화면을 차지합니다 (CSS 너비/높이/위치에 정의 된대로). 그러나 전체 페이지를 쌓는 경우 전체 페이지의 스태킹 컨텍스트 내에서 # cont의 위치에 따라 다릅니다. – Stephan

는

#e2{ 
    z-index:1001; 
    position: absolute; 
}

그것은 트릭을해야보십시오.

하지 않으면

#e2{ 
    z-index: 9999 !important; 
    position: absolute !important; 
    top: 0px; //you can change that 
    left: 0px; //you can change that 
}

여전히 작동하지 않는 경우도 아마 자바 스크립트가 설정되어 더 큰 Z-인데 스는 #overlay하기 위해 9999 tahn.

<div id="cont"> 
    <div id="overlay"></div> 

    <div id="e1"> 
     Some 
    </div> 
    <div id="e2"> 
     Content 
    </div> 
</div>

및 위치 #의 E2는 상대적으로 설정해야합니다 :

출처

2013-03-17 15:40:03 Derfder

아니요 작동하지 않습니다 ... http : //jsfiddle.net/UkbXU/3/ –

# cont z-index를 오버레이 식별자 이상으로 변경해야합니다. 너 무슨 짓을하려는거야? – Derfder

정말 죄송합니다. 작동하지 않습니다. –

Z- 색인 문제 CSS

답변

관련 문제