Z- 인덱스가있는 DIV 위치 지정

Question

현재 Z- 인덱스를 사용하여 특정 순서로 일부 DIV를 배치하려하지만 jsfiddle에서 설정하려고하지 않는 것 같습니다. 어떤 문제라도 볼 수 있다면.

RED GREEN BLUE YELLOW

http://jsfiddle.net/BUWaZ/4/

HTML

<div id="green"> 

    <div id="yellow"> 
    </div> 

    <div id="red"> 
    </div> 

</div> 

<div id="blue"> 
</div> 

: 여기

내가 그것을 다시 전면에서 일하고자하는 순서입니다 기음 SS

#green{ 
    background-color:green; 
    height:100px; 
    width:100%; 
    position:fixed; 
    top:0; 
} 

#red { 
    margin:-85px auto 0; 
    width:406px; 
    height:60px; 
    background-color:red; 
z-index:-99999; 
} 

#blue{ 
    margin:350px auto 0; 
    width:60px; 
    height:465px; 
    z-index:99999; 
    background-color:blue; 
} 

#yellow { 
    margin:0px auto 0; 
    width:170px; 
    height:170px; 
    background-color:yellow; 
    z-index:99999; 
} 

Answer 1

z- 색인이 작동하려면 위치를 설정해야합니다. 위치가없는 위치와 관련된 위치를 추가하십시오. 또한 파란색과 노란색에 대해 동일한 Z- 색인이 없거나 어떤 색인을 선택해야할지 모를 것입니다. 당신이 그의 부모 뒤에 그를 넣어 것입니다 자식 요소의 Z- 인덱스를 정의 할 수는 z-index'ed 요소의 위치를 ​​정의하는 데 게다가

#green{ 
    background-color:green; 
    height:100px; 
    width:100%; 
    position:fixed; 
    top:0; 
} 

#red { 
    margin:-85px auto 0; 
    width:406px; 
    height:60px; 
    background-color:red; 
z-index:-99999;  
    position:relative; 
} 

#blue{ 
    margin:350px auto 0; 
    width:60px; 
    height:465px; 
    z-index:99998; 
    background-color:blue; 
    position:relative; 
} 

#yellow { 
    margin:0px auto 0; 
    width:170px; 
    height:170px; 
    background-color:yellow; 
    z-index:99999; 
    position:relative; 
} 

Answer 2

http://jsfiddle.net/SzxT2/1/

. ( also see)

당신을 위해 다음과 같은 작동하는지 확인 : jsfiddle.net/BUWaZ/7/

HTML

#red { 
    margin:0 auto 0; 
    width:406px; 
    height:60px; 
    background-color:red; 
    position:relative; 
    z-index:100; 
} 
#red_placer { 
    width:100%; 
    position:fixed; 
    top:85px; 
    z-index:100; 
} 

#green{ 
    background-color:green; 
    height:100px; 
    width:100%; 
    top:0; 
    position:fixed; 
    z-index:200; 
} 

#blue{ 
    margin:30px auto 0; 
    width:60px; 
    height:465px; 
    background-color:blue; 
    position:relative; 
    z-index:300; 
} 

#yellow { 
    margin:0px auto 0; 
    width:170px; 
    height:170px; 
    background-color:yellow; 
    position:relative; 
    z-index:400; 
} 
#yellow_placer { 
    width:100%; 
    position:fixed; 
    top:0; 
    z-index:400; 
}​