div를 다른 div 상단에 배치하려면 어떻게해야합니까?

Question

기본적으로 나는 겹치는 부분 뒤에 다른 div가있는 상태에서 항상 앞면에 가운데 이미지 ("drob"div)를 표시하려고합니다. 당신은 당신의 중첩 된 div의 Z- 인덱스를 설정해야합니다

body { 
background-image:url('background.jpg'); 
} 

#container { 
width: 1040px; 
height: 768px; 
margin: 0 0 0 75px; 
} 


#navbar { 
float: right; 
height: auto; 
width: 150px; 
margin: 0 0 0 10px; 
color: #FF0; 
list-style: none; 

} 


#note { 
width: auto; 
height: auto; 
float: left; 
margin: 20px 0 0 -110px; 

} 


#drob { 
height: auto; 
width: auto; 
float: left; 
margin: 50px 0 0 -20px; 

} 


#gallery { 
float: left; 
width: 675px; 
height: auto; 
margin: -125px 0 0 -20px; 

} 


#gallery img { 
float: left; 
margin: 0 0 0 5px; 

} 


#video { 
height: auto; 
width: auto; 
float: left; 
margin: 150px 0 0 -20px; 

} 


<div id="container"> 
<div id="navbar"> 
    <ul> 
     <li>Home</li> 
     <li>About Denard</li> 
     <li>Stats</li> 
     <li>Media</li> 
    </ul> 
</div> 
<div id="video"> 
<iframe width="450" height="265" src="http://www.youtube.com/embed/ZmmCAI8U_Vc" 
frameborder="0" allowfullscreen></iframe> 
</div> 
<div id="drob"> 
<img src="images/drob.png" height="560" width="404" alt="Denard Robinson" /> 
</div> 
<div id="note"> 
    <a href="#"><img src="images/note.png" height="464" width="331" alt="note" /></a> 
</div> 
<div id="gallery"> 
    <img src="denard1.jpg" height="145" width="215" alt="denard1" /> 
    <img src="denard2.jpg" height="145" width="215" alt="denard2" /> 
    <img src="denard3.jpg" height="145" width="215" alt="denard3" /> 
</div> 

</div>  


</body> 

Answer 1

:

그리고 여기에 코드입니다.

더 낮은 z- 색인을 가진 div는 더 높은 색인을 가진 div 뒤에 있습니다.

넌 그냥 Z- 인덱스를 추가하여만큼 당신이 당신이 위에 물건을 넣을 수있는 선택 iframe을 해달라고으로 http://reference.sitepoint.com/css/z-index

Answer 2

에서 Z- 인덱스에 대한 자세한 내용을 확인할 수 있습니다. 그러나이 장면에서는 iframe을 사용합니다. 절대 위치 지정을 사용하여 다른 레이어를 배치 해보십시오. 어쩌면

#drob { 
height: auto; 
width: auto; 
float: left; 
margin: 50px 0 0 -20px; 
position: absolute; 
} 

또는 둘, Z- 인덱스와 위치를 시도 ... 내가 Z-인덱스 위치 elemnts에 작동 생각하기 때문에 : 같은 것이 될 것 작동 것 어쩌면

#drob { 
height: auto; 
width: auto; 
float: left; 
margin: 50px 0 0 -20px; 
position: absolute; 
z-index: 5; 
} 

을