1

我在使用 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>
4

2 回答 2

4

该z-index属性仅适用于定位元素，因此您需要明确设置位置，profilebasic例如：

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

jsFiddle 示例

（请注意，我还必须在您的按钮上设置一些 CSS，否则它最终会出现在您定位的 div 下。）

于 2013-04-24T17:19:21.923 回答
0

由于uploadbox已经从前面开始，我假设您想交换这些。

根据 z-index 规则，一个绝对定位的 div 仍然会出现在一个非绝对定位的 div 前面，除非它的 z-index 值为负。

也就是说，对您想要在后面的框使用负 z-index。

http://jsfiddle.net/X54gr/

于 2013-04-24T17:21:18.900 回答