왜 appendChild는 zIndex를 무시합니까?

Question

div에 자식 (축소판 그림)을 추가하고 부모 div (모두 appendChild를 사용)에 큰 차단 div를 추가하고 엄지 divs가 표시되는 것을 볼 수있는 이유가없는 매우 이상한 상황이 있습니다. 심지어 요소 관리자에서 비록 차단제 DIV (위, 그들은 올바른 노드 계층 구조에

이 명확하게하기 위해

<div id="P"> 
    <div id="thumbs"></div> 

</div> 

pseudo script: 
fill thumbs with THUMB divs ; 
P.appendChild(large blocker) ; 

이 과정 후 요소 관리자를 보여줍니다..

<div id="P"> 
    <div id="thumbs"> 
    <div thumb><div thumb>.... n number of times 
    </div> 
    <div blocker> 
</div> 

그러나 그는 엄지 손가락이 차단제 위에 나타납니다. 나는 zIndex를 설정하지 않습니다. 엄지 손가락은 display : inline-block으로 설정됩니다; 블로어 사업부에 속하지 않는 이유가 있습니까?

Answer 1

CSS를 사용하여 오브젝트를 조작하는 경우가 아니면 오브젝트가 겹치지 않도록 순서대로 배치됩니다. 엄지 손가락은 HTML의 블로거 div 앞에 놓여 있으므로 블레어 div가 보이기 전에 레이아웃을 지정하고 페이지의 위치를 ​​지정해야합니다. 이것이 예상되는 동작입니다.

페이지의 엄지 전에 블록 div를 원한다면 HTML의 엄지 손가락 앞에 놓으십시오 (또는 float 또는 position : absolute를 사용하십시오).

엄지 손가락 상단에 차단기 div를 넣으려면 용기를 position: relative으로 만들고 차단기를 position: absolute으로 만들고 적절한 z- 색인을 만들어 맨 위에 가져 가야합니다.

다음은 엄지 손가락을 통해 차단기 div의 위치를 ​​지정하는 예입니다 : http://jsfiddle.net/jfriend00/cxkmp/. 나는 부분적으로 만 배치 했으므로 뒤에 엄지 손가락을 어떻게 가리는 지 확인할 수 있습니다.

FYI : 예제 HTML에 div 태그가 제대로 닫혀 있지 않아서 실제 HTML이 그렇게 길어지면 엄청난 혼란을 가져올 수 있습니다.

FYI : z-index은 position:static이 아닌 개체 (예 : 가장 일반적으로 position: absolute)에 적용됩니다. position:static 인 개체는 z-index에 관계없이 자식 순서로 표시됩니다.