Question

我正在尝试创建两个以图像为背景的div。那么如何让后来创建的div出现在已经存在的div下面。据我所知，它将出现在它之上。就像在Photoshop中一样，您可以向前和向后移动图层。关于我应该使用什么代码的任何建议？

这是我的代码。所以我希望“雾”div出现在“凝视”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);

Answer 1

是的，你可以在css中使用z-index属性。为要显示在顶部的div提供更多z-index值并给出一个较小的“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 function

中添加以下行

$("#mist").css("z-index","1000);

如何创建新的div但出现在之前的div下面？

1 个答案: