Question

我试图创建并创建一个新的div标签，以响应名为函数调用的setInterval。 div标签确实出现 - 当我检查chrome开发人员工具时它就存在了，但它并没有出现在其他元素的顶部。

我已将新生成的div的z-index设置为2000，其他z-index不大。代码运行后，我可以使用Chrome开发工具查看新创建的div标签，但它们落后于其他div。它们应该出现在其他一切的前面。

CSS

#main_wrapper{
  position: relative;
  width:850px;
  border:solid 4px #ccc;
  overflow: visible;
  display: table;
}
#my_img{
  position: relative;
  width:650px;
  display: inline-block;
  vertical-align: top;
}
#hgh_lghtr{
  position: absolute;
  top:5px;
  left:1px;
  z-index:1000;
  border:solid 4px green;
  width: 20px;
  height: 20px;
}
#cntnt_bx{
  position: relative;
  top:0px;
  z-index:22;
  border:solid 4px red;
  width: 150px;
  height: 100%;
  display: inline-block;
  margin-left: 14px;
  padding: 0px;
}
#mini_nav_hd{
  position:relative;
  top:0px;
  z-index:33;
  width:92%;
  margin:0 auto;
  min-height:20px;
  border: solid 2px green;
}

#tmp_bx{
  position: absolute;
  top:50px;
  left:50px;
  z-index:2000;
  border:solid 4px green;
  min-width: 100px;
  min-height: 100px;
}

的JavaScript

<script>
  var slides = [
    {  "name":"slide1",
       "x":5,
       "y":1,
       "width": 20,
       "height": 20,
       "color":"#D80000",
       "title":"Navigation Toggle",
       "desc":"Shows hides the nagivation menu."
     }
  ];

  //***********************************************************
  //Changes location of pre-existing div and attempts to create
  //new div and append it
  //***********************************************************
  function changHlghtrPos(){
    var slide = slides[slideCntr];

    document.getElementById("hgh_lghtr").style.borderColor = "red";
    document.getElementById("hgh_lghtr").style.top = slide.y + "px";
    document.getElementById("hgh_lghtr").style.left = slide.x + "px";
    document.getElementById("hgh_lghtr").style.width = slide.width + "px";
    document.getElementById("hgh_lghtr").style.height = slide.height + "px";

    var tmp_bx = document.createElement("div");
    tmp_bx.id = "tmp_bx";
    document.getElementById("main_wrapper").appendChild(tmp_bx);
  }

  slideCntr = 0;

  //******************************************
  //Determines if it is ok to move the pre-existing div
  //to the next location or clearInterval
  //******************************************
  function nextSpot(){
    if(slideCntr < 5){
      slideCntr += 1;
      changHlghtrPos();
    }else{
      clearInterval(nTime);
    }
  }


  jQuery(document).ready(function() {
    $("#main_wrapper").empty();
    var main_hldr = document.getElementById("main_wrapper");

    var my_img = document.createElement("img");
    my_img.id = "my_img";
    my_img.src = "https://some_image.png";
    my_img.alt = "MyProject";

    var cntnt_bx = document.createElement("div");
    cntnt_bx.id = "cntnt_bx";

    var hgh_lghtr = document.createElement("div");
    hgh_lghtr.id = "hgh_lghtr";

    main_hldr.appendChild(my_img);
    main_hldr.appendChild(hgh_lghtr);
    main_hldr.appendChild(cntnt_bx);

    var mini_nav_hd = document.createElement("div");
    mini_nav_hd.id = "mini_nav_hd";
    mini_nav_hd.textContent = "Navigation";

    var cntntBx = document.getElementById("cntnt_bx");
    cntntBx.appendChild(mini_nav_hd);

    nTime = setInterval(nextSpot,2000);

  });
</script>

示例HTML

<html>
  <head></head>
  <body>
    <div id="main_wrapper">
      <!--three elements are generated when page loads-->
      <!--one element is generated in response to setInterval-->
    </div>
  </body>
</html>

Answer 1

你想要this吗？如果有效，

gcc main.c

也许您需要将Problem signature: Problem Event Name: APPCRASH Application Name: a.exe Application Version: 0.0.0.0 Application Timestamp: 558f50c8 Fault Module Name: KERNELBASE.dll Fault Module Version: 6.1.7600.17206 Fault Module Timestamp: 50e6605e Exception Code: c0000005 Exception Offset: 00011bcd OS Version: 6.1.7600.2.0.0.768.3 Locale ID: 1031 Additional Information 1: 0a9e Additional Information 2: 0a9e372d3b4ad19135b953a78882e789 Additional Information 3: 0a9e Additional Information 4: 0a9e372d3b4ad19135b953a78882e789 Read our privacy statement online: http://go.microsoft.com/fwlink/?linkid=104288&clcid=0x0409 If the online privacy statement is not available, please read our privacy statement offline: C:\Windows\system32\en-US\erofflps.txt的位置切换为function nextSpot(){ if(slideCntr < 5){ slideCntr += 1; changHlghtrPos(); }else{ clearInterval(nTime); } }的位置，因为数组的索引从0开始。

JavaScript生成的div标签出现在其他元素后面 - 设置了z-index

1 个答案: