요소에 대한 z- 색인 그러나 다른 위치?

빠른 질문; 만약 당신이 2 divs, 하나의 absolutley 위치와 하나의 친척, 그것은 z 색인을하고 있지 않습니다, 나는 jsfiddle을 첨부했습니다.요소에 대한 z- 색인 그러나 다른 위치?

둘 다 상대적인 경우 DOM의 흐름과 함께 가고 하나는 z가 아닌 y 축에서 다른 아이디어보다 위에 올라 가게됩니다. http://i.imgur.com/Lo37y.png를, 회색 것은 이미지 뒤에해야 일이 뭐죠의

스크린 샷을합니다 (이 jsfiddle에서 렌더링 고정 감사 Onheiron)

감사합니다.

2012-08-08 zomboble

JSFiddle이 렌더링되지 않습니다. –

그래, 내 OP – zomboble

이 피들 렌더링에서 스크린 샷을 볼 수 있습니다 : http://jsfiddle.net/Wjw9j/2/ 더블 ID CSS의 선언과 함께 문제가 있었는데 제거 #midwrap – Onheiron

자녀를 부모 뒤에 표시 할 수 없습니다! 당신은 형제 자매와 만 할 수 있습니다.

내가 컨텍스트를 스태킹 설명 할 필요가, 당신의 updated fiddle

2012-08-08 08:26:28 Christoph

답장을 보내 주셔서 감사합니다. 내 CSS는 첨부 된 것처럼 보입니다. 그러나 여전히 브라우저에서 올바르게 렌더링되지 않습니다. http://jsfiddle.net/Wjw9j/6/ – zomboble

@ zomboble "올바르지 않다"라고 기술하십시오. 당신은 html이 작동하도록 수정했는지 알아 보았습니까? 원래 마크 업으로는이를 달성 할 수 없습니다. – Christoph

Ahh 죄송합니다, 잘못 읽었습니다. 답변 해 주셔서 감사합니다 .-) – zomboble

에 대답하기 위해이 질문을 참조하십시오.

요소에 Z- 색인을 추가하면 스태킹 컨텍스트가 만들어집니다. 모든 자식 요소는이 부모 스태킹 컨텍스트와 비교됩니다.

요소 "slideImg"의 Z- 색인은 1000입니다. 그런 다음 모든 하위 요소는이 상위 요소의 스태킹 컨텍스트 내에서 비교됩니다. 따라서 "그림자"의 Z- 색인은 "slideImg"의 스태킹 컨텍스트 내에 있기 때문에 실제로는 "1000 + 0"입니다.

가 뒤에 "그림자"를 넣어하려면 "slideImg는"당신이 그들의 둥지를 취소 할 수 있습니다 :

<div id="shadow">  
      <div id="slideImg"></div>  
    </div>

또는 서로에 인접한 넣어, 그래서 그들은 각각 동일한 스택 맥락에서 고려된다.

<div id="shadow"></div> 
    <div id="slideImg"></div>

2012-08-08 08:35:28 Fenton

답변