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 は、z-index 値が負でない限り、絶対配置されていない div の前に表示されます。

つまり、後ろに置きたいボックスに負の z-index を使用します。

http://jsfiddle.net/X54gr/

于 2013-04-24T17:21:18.900 に答える