0

我正在尝试创建两个以图像为背景的 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 回答