javascript 代码和 zindex

Question

我在使用 javascript 更改 z-index 时遇到问题，任何人都可以帮助我解决我出错的地方，

我想要做的是在单击按钮后让一个框出现在另一个框的顶部，但它似乎不起作用。

function toggleupload(){
            var but = document.getElementById('picbutton').innerHTML;
            if (but == "Change Picture"){
                            document.getElementById('picbutton').innerHTML = "Hide upload box";
                            document.getElementById('uploadbox').style.zIndex = 2;
                            document.getElementById('profilebasic').style.zIndex = 1;
            }
            if (but == "Hide upload box"){
                            document.getElementById('picbutton').innerHTML = "Change Picture";
                            document.getElementById('uploadbox').style.zIndex = 1;
                            document.getElementById('profilebasic').style.zIndex = 2;
            }

}




#profilebasic{
            width:300px;
            height:300px;
            z-index:2;
            background-color:#0F0;

}
#uploadbox {
            position:absolute;
            top:0px;
            left:0px;
            width:300px;
            height:300px;
            z-index:1;
            background-color:#F00;

}
#uploadbo{
            text-align:center;
            width:300px;
            height:300px;
            z-index:3;

}




<div id="uploadbo">
<div id="profilebasic">
</div>
<div id="uploadbox">
</div>
<button  onclick="toggleupload();" id="picbutton">Change Picture</button>
            </div>

Answer 1

z-index 属性 only works on positioned elements ，因此您需要在 profilebasic 上明确设置位置，例如:

#profilebasic {
    width:300px;
    height:300px;
    z-index:2;
    background-color:#0F0;
    position:absolute;
}

jsFiddle example

(请注意，我还必须在您的按钮上设置一些 CSS，否则它会在您定位的 div 下结束。)