0

画像を背景として2つのdivを作成しようとしています。では、後で作成したdivを既存のdivの下に表示するにはどうすればよいですか。私が知っているように、それはその上に表示されます。Photoshopの場合と同様に、レイヤーを前後に移動できます。どのコードを使用すべきかについての提案はありますか？

これが私のコードです。したがって、「mist」divを「gaze」divの下に表示する必要があります。

var gaze= document.createElement('div');
        gaze.setAttribute("id", "gaze");
        gaze.setAttribute("style", "width:716px; height: 158px; background-image: url(images/gaze.png); opacity:1.0; position:absolute; left: "+window.innerWidth*0.187+"px; top: "+window.innerHeight*0.202+"px")
        document.body.appendChild(gaze);
        gaze.addEventListener('click',fadeIn, false);
        dim();
    }


    function dim () {
        gaze = document.getElementById("gaze");
        gaze.style.cursor = "pointer";
        gaze_opacity = parseFloat(gaze.style.opacity).toFixed(1);
        gaze_opacity-= .1;
        gaze.style.opacity=gaze_opacity;
        if (gaze_opacity>0.1) {
            setTimeout('dim()', 300);
        }
    }

    function fadeIn() {
        gaze = document.getElementById("gaze");
        gaze.style.opacity = 1.0;
        gaze.removeEventListener('click',fadeIn,false);
        gaze.addEventListener('click',mist, false);
    }

    function mist() {
        var mist= document.createElement('div');
        mist.setAttribute("id", "mist");
        mist.setAttribute("style", "width:1048px; height: 720px; background-image: url(images/mist.png); opacity:1.0; position:absolute; left: "+window.innerWidth*0+"px; top: "+window.innerHeight*0+"px")
        document.body.appendChild(mist);
4

1 に答える 1

1

z-indexはい、cssでプロパティを使用できます。z-index上に表示したいdivに多くの値を与え、下に表示したいdivに小さい「z-index」値を与えます

<div id="Topdiv"style="position:absolute;z-index:1000;top:100px;left:100px">

これが一番上になります

</div>

 <div id="Bottomdiv"style="position:absolute;z-index:1;top:100px;left:100px"></div>

共有したコードについては、document.ready関数に次の行を追加します

$("#mist").css("z-index","1000);
于 2013-02-22T05:36:50.200 に答える