css：z-index不起作用

Question

我想將#user_change_photo放在#user_pic之上，試着用z-index，但它不起作用。

HTML

<div id="user_pic"><span><img id="pic" src=""></span></div> 
<div id="user_change_photo">Change Photo</div> 

CSS

<style> 
#pic{ 
    background-color: orange; 
    width:320px; 
    height:258px; 
    z-index: -1; 
} 
#user_pic{ 
    z-index: -1; 

} 
#user_change_photo{ 
    width:920px; 
    background-color: red; 
    color:black; 
    margin-top: -50px; 
    z-index: 1; 

} 
</style> 

Answer 1

每個選擇添加position:relative;與z-index風格